Category Archives: HTML5

Android Numeric Keypad Password Field

Just discovered something, which may be useful to some of you Googlers!

Problem

To get a the numeric keypad up on an iOS device it’s fairly easy. All you do is apply the pattern attribute. At Sky we use ‘pattern=”\d*”‘ in our codebase. The problem is that this doesn’t work on Android. Android requires that the field has a type attribute of either, ‘tel’ or ‘number’. This creates problems, as it means that if you want a numeric password field, you can’t get the numeric keypad up on Android… or can you?

Introducing -webkit-text-security:

The solution (and this also works for iOS) is to create all numeric password fields as ‘number’ (‘tel’ works too), and apply the following CSS property:

input[type=number] {
  -webkit-text-security: disc;
}

This replaces the text with the asterisk typically found on a password field. This means that you can do away with the ‘pattern’ attribute completely. I’d strongly suggest that you don’t get carried away and use this CSS for all password fields – it should really only be used where you need a numeric keypad for a password!

I’ve confirmed this works on iOS 6.1.2, Android 2.3.3 and Android 4.1.2

Hope that helps someone 🙂

Share