How to force numeric keyboard display on the smartphone when clicking an input?

Question

I have a field on my form with type="text" and has mask for the zip code. When access by cell phone and click on the field need to trigger the number keyboard. Can anyone tell me if you have any possibility to open the automatic keypad?

Answer 1

In Html5 you can use inputmode:

<input inputmode="numeric">

Answer 2

Unfortunately the inputmode only supported in Chrome (Can I Use).

Can use type="tel". This type will open the numeric dial pad:

Answer 3

Remember that ZIP code is a text that is composed with numeric characters, so it makes no sense to use the field number. As already commented, in HTML 5 there is the attribute inputmode that can be used to assist devices that display virtual keyboards in their forms that facilitate field filling.

Possible values of this attribute are:

• none: no keyboard will be displayed;
• text: textual keyboard as per user location;
• decimal: fractional numeric keypad;
• numeric: keypad;
• tel: telephone keypad - numeric including keys * and # (it is preferable to use the <input type="tel">);
• search: virtual keyboard optimized for searches;
• email: textual keyboard for emails (it is preferable to use <input type="email">);
• url: textual keyboard for Urls (it is preferable to use <input type="url">);

You can read more in the specification WHATWG and see the current support in Can I Use.

Answer 4

HTML5 added new type types to the input field

<input type="number">

To add ZIP type mask by editing the date-Mask as below

<input class="form-control" placeholder="Ex.: 00000-000" data-mask="00000-00" type="text">