Best settings for HTML <input type="number">, for mobile devices

Question

I've been reading many other questions, like these[1][2][3] for example, but the problem still persists.

I need to find the "cleanest" way to have a HTML input for mobile devices and which respects all these three rules:

1. suitable mainly for numbers, integer or float

2. shows the numeric keypad on mobile devices, on Chrome for Android and Safari for iOS, with no strange extra keys

   

3. fully respects the HTML5 rules (tested by W3 validator)

What have I tried?

I've been across these solutions, which neither of theme cumulatively respects those three above rules.

Solution 1

<input type="text" pattern="\d*" />

This solution despite working in iOS and fulfilling HTML rules tested by w3 validator, presents in Chrome Android the full keypad with the QWERTY keyboard.

Solution 2

<input type="number" pattern="\d*" />

This solution works on both systems iOS and Android Chrome, showing the numbers keypad on both systems, but it throws out a HTML validation error

Attribute pattern is only allowed when the input type is email, password, search, tel, text, or url.

Solution 3

<input type="number" />

This solution passes the HTML test, shows nice on Chrome, but on iOS keypad it presents several unwanted keys

Solution 4

I see that many developers use this solution

<input type="tel" />

But as tested with Android Chrome, it doesn't allow dot symbols (.), and the keys have letters, which is superfluous.

Answer 1

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" />