How do I force numeric keypad display on my smartphone when I click on an input?

1

I have a field in my form with type="text" and it has masks for the zip code. When I access the cell phone and click on the field I need to press the number keypad. Can anyone tell me if you have any possibility of opening the automatic numeric keypad?

    
asked by anonymous 25.06.2018 / 20:19

4 answers

1
  

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

You can use type="tel" . This type will open the dial pad:

    
25.06.2018 / 20:39
2

In html5 you can use inputmode:

<input inputmode="numeric">
    
25.06.2018 / 20:27
1

Remember that CEP is a text that is composed of numeric characters, so it does not make sense to use the number field. As already commented, in HTML 5 there is the inputmode attribute that can be used to assist devices that display virtual keyboards in their forms that make it easier to fill the field.

The possible values of this attribute are:

  • none : no keyboard will be displayed;
  • text : textual keyboard according to user location;
  • decimal : fractional numeric keypad;
  • numeric : numeric keypad;
  • tel : telephone keypad - numeric including the * and # keys (it is preferable to use <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 WHATWG specification and see the current support at Can I Use .

    
25.06.2018 / 20:46
-1

In HTML5 new type types were added to the input field

<input type="number">

To add the zip code mask by editing the data-mask as below

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