Chrome auto formats input=number

Question

I have a web application where I'm specifying an input field to be a number using the HTML5 property type="number".

<input type="number" value="123456" />

By specifying the type, Chrome automatically formats the value to include a comma (123,456). In other browsers it does not format the number, but it also does not prevent non-numeric characters.

In this case, I don't want the comma to be added. Is there any way to turn off localized formatting?

Answer 1

Why would you want to disable localized formatting? If you want a different format, just change the localization settings of your PC. Why would a user not be interested to show a number in his or her local format? This is definitely not a bug in Chrome but a feature!

It seems to me you are not really using a "number" as input but rather a "text" code with a pattern. See the other posts for suggestions to that.

Answer 2

Number is one of the new HTML5 input types. There are loads of these - email, date, time, url, etc. However, I think only Chrome has implemented them so far. The others fall back to using the default type (text).

For more info about HTML5 input types: http://diveintohtml5.ep.io/forms.html

If you want to disable it on Chrome, you could leave as text and change it to number if the user device is a handheld. Since it's not a usability killer if the user device sniffing gives the wrong result, you shouldn't have any problems.

Answer 3

Try this:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $('[type=number]').attr('type', 'text').attr('pattern', '[0-9]*');
}

Answer 4

Refer to my answer for this similar question.

I believe using <input type="tel" /> is most logical for avoiding this pitfall currently. The other options are intriguing and slightly new to me (like the pattern attribute) but I found them to be unsatisfactory for my design. You can look at a screenshot of a mobile application I complete for Hilton not too long ago here (it's actually shown in the answer I first referenced).

Answer 5

Here is a whole list of regular expressions that you can plug into the "pattern" attribute of the html input tag: HTML5 Pattern

Here is how I am using a pattern to format the number two decimal points:

<input type="number" pattern="\d+(\.\d{2})?" />

Unfortunately it doesn't seem to work quite right on the iPad.

Answer 6

You could try ...

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

which will enforce the entry of 0-9 on Firefox 4 on the desktop as well as an iPhone; I don't have Chrome at hand to try it on, but it should do the same.