HTML Input field force numbers

Question

Is it possible to create an input field that sets the default input character set to numbers on a mobile phone?
For example to make it easier type in a telephone number into a HTML form.

Answer 1

You can use <input type='tel'>. This is a new HTML5 feature. Older browsers will simply default to a text input field.

Answer 2

Take a look here: http://diveintohtml5.org/forms.html at chapter Numbers as Spinboxes

Answer 3

The short answer is with current standards - no there's no (pure) HTML way to force numbers into a field.

The longer answer is yes it's possible with Javascript validation (which checks the contents after the user has entered it, and complains if it's not good), Javascript input catching (which ignores everything but numbers - tricky though since you have to reimplement backspace, delete, arrow key processing etc). It'll also be possible in HTML5, which some mobile phones support, but it's not yet a ratified standard, so you can hardly depend on it.

There are some excellent combined-solution libraries out there that'll offer the HTML5 approach if the browser supports it, or fall back on an HTML+Javascript solution, such that all user's get a similar experience. No accounting for the user's that have turned of Javascript of course ;)

Answer 4

To make inputing numbers easier, use <input type="number">. To make entering phone numbers easier, use <input type="tel">. Not all phone will support them, but the iPhone at least will give you a numeric keypad by default instead of the normal keyboard. See the spec and Dive Into HTML5 for more information.

Answer 5

So you can use either type="tel" or type="numbers".

The difference is that one tries to bring up your phone dial keyboard and other simply switches to the numbers input of your mobile keyboard.

Answer 6

Here's an example with Javascript. This will only allow numbers from the numpad/numbers on top of the keypad, and formatters (shift/backspace/etc). You may also consider adding a setTimeout(), with a couple seconds timeout, for the onchange event to check in case someone pastes non numbers into the field as well as server side validation.

Example

http://jsfiddle.net/vce9s/