Phone: numeric keyboard for text input

Question

Is there a way to force the number keyboard to come up on the phone for an <input type="text">? I just realized that <input type="number"> in HTML5 is for “floating-point numbers”, so it isn’t suitable for credit card numbers, ZIP codes, etc.

I want to emulate the numeric-keyboard functionality of <input type="number">, for inputs that take numeric values other than floating-point numbers. Is there, perhaps, another appropriate input type that does that?

Answer 1

There is a danger with using the <input type="text" pattern="\d*"> to bring up the numeric keyboard. On firefox and chrome, the regular expression contained within the pattern causes the browser to validate the input to that expression. errors will occur if it doesn't match the pattern or is left blank. Be aware of unintended actions in other browsers.

Answer 2

I have found that, at least for "passcode"-like fields, doing something like <input type="tel" /> ends up producing the most authentic number-oriented field and it also has the benefit of no autoformatting. For example, in a mobile application I developed for Hilton recently, I ended up going with this:

... and my client was very impressed.

Answer 3

Using the type="email" or type="url" will give you a keyboard on some phones at least, such as iPhone. For phone numbers, you can use type="tel".

Answer 4

In 2018:

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

is working for both Android and iOS.

I tested on Android (^4.2) and iOS (11.3)

Answer 5

For me the best solution was:

For integer numbers, which brings up the 0-9 pad on android and iphone

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d]*" />

You also may want to do this to hide the spinners in firefox/chrome/safari, most clients think they look ugly

 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
 }

 input[type=number] {
      -moz-appearance:textfield;
 }

And add novalidate='novalidate' to your form element, if your doing custom validation

Ps just in case you actually wanted floating point numbers after all,step to whatever precision you fancy, will add '.' to android

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d\.]*" step="0.01" />

Answer 6

You can try like this:

<input type="number" name="input">
<input type="submit" value="Next" formnovalidate="formnovalidate">

But be careful: If your input contains something other than a number, it will not be transmitted to the server.