Force decimal point instead of comma in HTML5 number input (client-side)

Question

I have seen that some browsers localize the input type="number" notation of numbers.

So now, in fields where my application displays longitude and latitude coordinates, I get stuff like "51,983" where it should be "51.982559". My workaround is to use input type="text" instead, but I'd like to use the number input with correct display of decimals.

Is there a way to force browsers to use a decimal point in the number input, regardless of client-side local settings?

(It goes without saying that in my application I anyway correct this on the server side, but in my setup I also need it to be correct on the client side (because of some JavaScript)).

Thanks in advance.

UPDATE As of right now, checking in Chrome Version 28.0.1500.71 m on Windows 7, the number input just does not accept decimals formatted with a comma. Proposed suggestions with the stepattribute do not seem to work.

http://jsfiddle.net/AsJsj/

Solution 1

With the step attribute specified to the precision of the decimals you want, and the lang attribute [which is set to a locale that formats decimals with period], your html5 numeric input will accept decimals. eg. to take values like 10.56; i mean 2 decimal place numbers, do this:

<input type="number" step="0.01" min="0" lang="en" value="1.99">

You can further specify the max attribute for the maximum allowable value.

Edit Add a lang attribute to the input element with a locale value that formats decimals with point instead of comma

Solution 2

Currently, Firefox honors the language of the HTML element in which the input resides. For example, try this fiddle in Firefox:

http://jsfiddle.net/ashraf_sabry_m/yzzhop75/1/

You will see that the numerals are in Arabic, and the comma is used as the decimal separator, which is the case with Arabic. This is because the BODY tag is given the attribute lang="ar-EG".

Next, try this one:

http://jsfiddle.net/ashraf_sabry_m/yzzhop75/2/

This one is displayed with a dot as the decimal separator because the input is wrapped in a DIV given the attribute lang="en-US".

So, a solution you may resort to is to wrap your numeric inputs with a container element that is set to use a culture that uses dots as the decimal separator.

Solution 3

According to the spec, You can use any as the value of step attribute:

<input type="number" step="any">

Solution 4

Use lang attribut on the input. Locale on my web app fr_FR, lang="en_EN" on the input number and i can use indifferently a comma or a dot. Firefox always display a dot, Chrome display a comma. But both separtor are valid.

Solution 5

I found a blog article which seems to explain something related:
HTML5 input type=number and decimals/floats in Chrome

In summary:

• the step helps to define the domain of valid values
• the default step is 1
• thus the default domain is integers (between min and max, inclusive, if given)

I would assume that's conflating with the ambiguity of using a comma as a thousand separator vs a comma as a decimal point, and your 51,983 is actually a strangely-parsed fifty-one thousand, nine hundred and eight-three.

Apparently you can use step="any" to widen the domain to all rational numbers in range, however I've not tried it myself. For latitude and longitude I've successfully used:

<input name="lat" type="number" min="-90.000000" max="90.000000" step="0.000001">
<input name="lon" type="number" min="-180.000000" max="180.000000" step="0.000001">

It might not be pretty, but it works.

View more solutions

Comments

[Kostas]

Have you found a solution yet? I am experiencing almost the same problem on Chrome 11 on Windows.

[chocolata]

No solution yet. Best guess is to avoid this (and use input type="text") untill this is fixed...

[fguillen]

Looks like is dependent of the locales of your browser, in my chrome I see comma, in my partner's chrome I see dot.

[Revious]

See also here: stackoverflow.com/a/24423879/196210

[jbutler483]

As i have also recently found out, some countries use comma instead of a 'decimal point.

[chocolata]

That's exactly the point! Client locale settings force comma in countries where they use comma. I'm living in such a country and now wish to use the input with a decimal point.

[pjdupreez]

@jbutler483 yes we do, but some of us try not to. what is annoying is that the people who set these 'standards' assume this is how some countries do it

[chocolata]

Thanks, that might be useful!

[chocolata]

This still doesn't work :-( Client-side local values always transform the decimal point in a decimal comma, regardless of step, or value attribute. :-(

[pintxo]

Using a library like number.js might help with the inherent problems of having multiple languages on this planet.

[Revious]

On chrome with input[type = number] is not working.. comma is always shown.

[Emanuele Paolini]

As I understand the question is not about having a decimal separator. The question is about having '.' instead of ',' when the locale of the client prefers ','.

[chocolata]

Hi Andrea, is there any way to do this without Angular JS? With jQuery for example?

[Andrea Aloi]

Sure, I suppose you could write, on a per-number-input basis, something like $("input[type=number]").on("keydown", function(e) { if(e.keyCode === 188) { this.value += "."; e.preventDefault(); }}); (once your page has fully loaded along with all the number inputs)

[luis.ap.uyen]

Interesting! Unfortunately it only seems to work in Firefox, not in Chrome (47.0.2526.106)

[Aubin]

Even not in Firefox, in France

[Aubin]

1. Build a page fr-FR which contains a form en-US, try to enter a decimal number like 123.45 and bingo! input.value is empty. :-(

[Matty K]

In that case it's a good thing I wrote a summary and then extrapolated, eh?

[khartvin]

no matter what decimal separator you use in the step attribute - the browser will still localise it. That is, with your example given - in most European countries the number displayed would be 10,56

[bbsimonbb]

Firefox respects the language setting of the page. Chrome imposes the decimal separator of the OS or the browser? Edge imposes the decimal point, regardless of the language settings of page or browser or OS. What a mess.

[svvac]

This snippet doesn't work on chrome (tested with v60). When typing 888,, setting the value property throws a warning stating that 888. is not a valid number (the regexp requires at least one number after the dot) and blanks the field. Typing a dot works though, probably because the input consider its value “in progress” and waits for more digits to be typed

[Krisztián Balla]

You don't need the wrapper element. You can set the lang attribute directly on the input element.

[chocolata]

Hi, just tested it out in Chrome 62.0.3202.94 on Windows 10. It doesn't work. When using the spinner buttons, the input reverts to comma instead of point (considering Belgian locale settings). Thanks anyways.

[Nuri YILMAZ]

there is no any effect define lang or not. Please define es-ES and see result

[Ashraf Sabry]

@NuriYILMAZ What browser are testing on? It still doesn't work on Chrome

[Peter]

I came back and re-read the question 5 years later and wondered why I provided the answer above. See the edit, please

[somsgod]

It will also not work if the data is being saved using ajax.

[spaark]

The lang attribute actually made the difference for me, thanks!

[Leonardo Sibela]

The first link does not use the lang attribute

[Ashraf Sabry]

@LeonardoSibela It does. Click on the HTML menu in the top left of the HTML editing part of the fiddle, a drop down menu will open that has the definition of the BODY tag

[Klesun]

The fun thing is that input.value actually returns a canonical number with a point despite it showing as a coma. So sucks living in an european third world country...

[Klesun]

Actually, setting type as text is indeed nearly the only solution to make point stay point. In conjunction with pattern="\d+\.\d{2}" I'd even call such UX acceptable... I'd drop the jquery part, though...

[Klesun]

But... but the question is about decimal numbers, step="3" would limit input to only whole numbers. And setting step="0.01" still shows it as a coma ;c

[Treedbox]

In my case GeolocationPosition.coords.latitude sometimes returns a float like 99.999999999999999. So the input step will be: step="0.000000000000001" to be a valid required input