HTML5 Zone is brought to you in partnership with:

A GNU/Linux g33k CLI+Web loving computer polyglot. Hemanth is a DZone MVB and is not an employee of DZone and has posted 17 posts at DZone. You can read more from them at their website. View Full User Profile

Better HTML password fields for mobile?

02.11.2013
| 1593 views |
  • submit to reddit

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!)
Published at DZone with permission of Hemanth Madhavarao, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)