Over a million developers have joined DZone.
Platinum Partner

Better HTML password fields for mobile?

· Web Dev Zone

The Web Dev Zone is brought to you in partnership with Mendix. Download this Forrester Report to gain a better understanding of the low-code platform market and how to make a strategic platform selection you won’t regret.

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!)

The Web Dev Zone is brought to you in partnership with Mendix. Better understand the aPaaS landscape and how the right platform can accelerate your software delivery cadence and capacity with the Gartner 2015 Magic Quadrant for Enterprise Application Platform as a Service.

Topics:

Published at DZone with permission of Hemanth HM , DZone MVB .

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}