How to open a number pad on android/chrome with <input type="text">?

Question

Requirement of input is to enter the zip code of United states so it would be 5 integers but it is just a bunch of strings to the application. Markup is HTML5.

• I cannot use input type="number" as 01234 would get converted to 1234, bummer for a zip code!
• I am currently using input type="tel" to get the number pad to open but I was thinking that a zip code is actually a text and thus I should be using input type="text" with some other filter to force the number pad to open, which is what I did, I tried using pattern="[0-9]*" but that seems to work only on safari browser (apple devices) & opens the number pad, but opens the text pad instead of number pad on android devices(chrome browser).

So input type="text" pattern="[0-9]*" works on iPhone iPad safari browsers but does not work on chrome browsers in android devices.

Anyone knows how to get a number pad to open using input type="text" on android devices using chrome browsers? Or 'input type="tel"' is the only way to open a number pad universally on all devices?

Similar question asked sometime back Phone: numeric keyboard for text input

Answer 1

A little late to the party I know but...

Using pattern="\d*" should work...

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

Answer 2

Input 'tel' was created to enter this type of data and to be cross-device. Using it is smart to input numbers, even though it's text. You're over-thinking this.