Over a million developers have joined DZone.

Better HTML password fields for mobile?

· Web Dev Zone

There is a particular issue that most of us would have noticed with few mobile devices in portrait with T9 (predictive_text) enabled : "To avoid prediction we have to use a lot of spaces and backspace."

Let me elaborate :

Say the password is : Pa55w0rd

In a mobile devices in portrait with T9 one would type : P[space] [backspace]a[space][backspace]...so on.

So would it be good not to read the spaces?

Well, there may be many pros and cons here, this is just a first cut trying to solve this. (There might be better solutions out there)

Do read Should users be allowed to entered a password with a space at the beginning or end? so passwords can contain spaces, so defaults is prevented only for non consecutive spaces, there by to get a single space the user needs to key-in two spaces, this is closet fix so far.

Code:

The Javascript code is pretty simple, makes use of the jQuery's Prevent defaults to prevent the default action of spacebar.

$(document).ready(function () {
    $('#inputid').bind('keypress', function (e) {
        // Prevent default if not consecutive spaces
        if ( undefined !== this.lastKey 
             && e.which == 32 
             && parseInt(this.lastKey) != 32) {
              e.preventDefault();
        }
        alert(e.defaultValue);
        this.lastKey = e.which;
    });
});

It's simple, but yet effective! Check out the DEMO

P.S : This need not just be for mobile devices only! :)

Update 0 :

Some solutions people suggested :

  • Turn off T9 prediction ? (Well i'm lazy!! )
  • Give a notification saying trun off T9 (How good?)
  • T9 must handle it! (That seems best!)
Topics:

Published at DZone with permission of Hemanth HM, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}