Android HTML5 Input Type="Password" and Numeric Keyboard

Android html5 input type=password and numeric keyboard

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]*">

Make Input Type=Password Use Number Pad on Mobile Devices

Some browsers (iOS) recognize the specific pattern attribute value of [0-9]* as triggering numeric keypad.

The HTML 5.1 draft contains the inputmode attribute, which has been designed to address the specific issue of input mode (like key pad) selection, but it has not been implemented yet.

You could use it for the future, though – even though the current HTML 5.1 does not allow it for type=password, for some odd reason.

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

Best settings for HTML input type=number , for mobile devices

For your specific task I have the extraordinary solution: we take the best solution with type="text" and pattern and then add the JavaScript which corrects the type attribute. We do it to pass through W3 validator.

The solution

// iOS detection from: stackoverflow.com/a/9039885 with explanation about MSStream
if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream)
{
    var inputs = document.querySelectorAll('input[type="number"]');
    for(var i = inputs.length; i--;)
        inputs[i].setAttribute('pattern', '\\d*');
}

<input type="number" />

My solution respects all your three rules (W3 validator inclusive).

But I have to mention that in this case(with pattern) on iOS we do not have the possibility to put float numbers with numeric keypad because on iOS we do not have any keypad with numbers including points. On Android we have this possibility. If you want to have numeric keypad with float numbers then you have to write for iOS extra solution like follows:

 <input type="number" />

what input field type forces the number pad mobile keyboard to come up when focused?

type="number" is HTML5 and many phones do not support HTML5.
For call link you can use type="tel" or
<A href="wtai://wp/mc;600112233">Special A</A>.
You should look at CSS WAP extensions (page 56) too.

EDIT 10/2015:

Most if not ALL smart phones support HTML5 and CSS3, so type="number" is the best way.

Trigger numeric keyboard for input in Android/IOS without HTML5

As per the documentation, Version 1.9.19 added support for <input type='tel' />

So, why not use that?

---

Related Topics