Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can you provide a hint to a mobile device that an HTML input field is numeric-only?

I've been doing some usability testing on a website I'm developing, using an Android phone and an iPod touch. In both cases, when entering a numeric field (time, distance in metres, etc) I have to take a manual step to change the keyboard layout to show digits. As the app will only accept numeric values in the textbox, I'd like to save the user the inconvenience and tell the device "switch to the number pad for this input".

Is this possible?

like image 989
Drew Noakes Avatar asked Aug 31 '10 19:08

Drew Noakes


People also ask

How do I restrict HTML inputs to numeric values?

To limit an HTML input box to accept numeric input, use the <input type="number">. With this, you will get a numeric input field. After limiting the input box to number, if a user enters text and press submit button, then the following can be seen “Please enter a number.”

Which attribute is required to open only a numeric keyboard?

To open Big Button Numpad, generally, we use the input tag attribute, type = 'number' which works right for android devices but not for IOS devices.


1 Answers

After some browsing, it seems that HTML 5 offers some answers for this, though they're not widely supported.

Specifically, the number type input:

<input type="number"
       min="0"
       max="10"
       step="2"
       value="6">

Here's a demo. Works on Chrome 6.0.472.51 (beta). Have yet to test on Android/iPhone but apparently it works.


(source: wearehugh.com)

like image 82
Drew Noakes Avatar answered Sep 21 '22 00:09

Drew Noakes