Android html5 input type="password" and numeric keyboard

Question

I am tasked with styling a web page for Android and iOS, where you are supposed to input your credit card information.

I can't get the security code field to open a numerical keyboard in Android.

This is the closest that I've come. It works on iOS, but not Android.

<input type="password" pattern="[0-9]*">

I am quite limited in what I am allowed to do:

• No Javascript, only HTML and CSS modifications.
• Input type must be password

Is it possible to get a password input field to open up a numerical keyboard in Android?

Answer 1

Unfortunately it seems that it's impossible to do this purely in html and css.

However for webkit browsers you can use text-security attribute:

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

And then just use a number type (yes i've read that you can't use this):

<input type="number" pattern="[0-9]*">