Better HTML Password Fields for Mobile ?

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 be good not to read the spaces?

Well, there may be many pros and cons here, this is just a first cut trying to slove 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!)