This jsfiddle demonstrates the following issue.

The simplest example is:

<input id="number" type="number" value="1">
console.log(document.getElementById('number').value);

This logs 1 as expected. THIS however:

<input id="number" type="number" value="1A">
console.log(document.getElementById('number').value);

Just logs an empty string '', because of the non-numeric character in the value. Some devices+browsers (e.g. Chrome) allow you to enter non-numeric characters in these inputs.

This is annoying because I want the type="number" input for devices that support it (e.g. iPhone, iPad number keyboard). However I want to use javascript to stop dirty input from being entered - which requires fetching the value on keyup - then regex replacing the non-numeric chars.

It appears jQuery's .val() method gives the same result.

This jsfiddle demonstrates the following issue.

The simplest example is:

<input id="number" type="number" value="1">
console.log(document.getElementById('number').value);

This logs 1 as expected. THIS however:

<input id="number" type="number" value="1A">
console.log(document.getElementById('number').value);

Just logs an empty string '', because of the non-numeric character in the value. Some devices+browsers (e.g. Chrome) allow you to enter non-numeric characters in these inputs.

This is annoying because I want the type="number" input for devices that support it (e.g. iPhone, iPad number keyboard). However I want to use javascript to stop dirty input from being entered - which requires fetching the value on keyup - then regex replacing the non-numeric chars.

It appears jQuery's .val() method gives the same result.

• javascript
• html
• textinput

• Don't prevent user input, it's very annoying. Check the value on keyup and if the value isn't valid, display an unobtrusive message to let the user know that the value isn't valid and let them fix it themselves. You only care that it's a valid value when sent to the server, in the meantime the value can be whatever. Oh, and Firefox displays the value as entered. – RobG Commented Mar 26, 2013 at 0:39
• Have the inputefields only have the type=number on iOS devices, if you want that input-method – Olaf Horstmann Commented Mar 26, 2013 at 0:57
• 1 Why do you need the value? You can know what will be inserted from keyboard events. – int32_t Commented Mar 26, 2013 at 11:06
• @int32_t - thanks I can't believe I didn't think of that! – Simon Lang Commented Mar 26, 2013 at 22:57

2 Answers 2

This is what I was looking for:

$('input[type=number]').keypress(function(e) {
  if (!String.fromCharCode(e.keyCode).match(/[0-9\.]/)) {
    return false;
  }
});

I understand preventing user input can be annoying and this still allows invalid input such as 1.2.3

However in this situation it is exactly what I needed. Hopefully it will be of use to someone else. Thanks to @int32_t for the suggestion.

You're not supposed to use <input type=number> for things that are not numbers (in very mathematical sense—it won't work for phone numbers or zip codes either) and clearing of the value is deliberate.

You can test whether device supports type=number and attach your fallback only if it doesn't:

var input = document.createElement('input');
input.setAttribute('type','number');
if (input.type != 'number') { // JS property won't reflect DOM attribute
   polyfill_number();
}

Alternatively (especially if your number is a zip code, serial number, etc.) you can use:

<input type=text pattern="[0-9]*">

and this will change the keyboard too.