Force decimal point instead of comma in HTML5 numb

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/

Answer 1

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.

Answer 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.

Answer 3

I don't know if this helps but I stumbled here when searching for this same problem, only from an input point of view (i.e. I noticed that my <input type="number" /> was accepting both a comma and a dot when typing the value, but only the latter was being bound to the angularjs model I assigned to the input). So I solved by jotting down this quick directive:

.directive("replaceComma", function() {
    return {
        restrict: "A",
        link: function(scope, element) {
            element.on("keydown", function(e) {
                if(e.keyCode === 188) {
                    this.value += ".";
                    e.preventDefault();
                }
            });
        }
    };
});

Then, on my html, simply: <input type="number" ng-model="foo" replace-comma /> will substitute commas with dots on-the-fly to prevent users from inputting invalid (from a javascript standpoint, not a locales one!) numbers. Cheers.

Answer 4

Sadly, the coverage of this input field in the modern browsers is very low:

http://caniuse.com/#feat=input-number

Therefore, I recommend to expect the fallback and rely on a heavy-programmatically-loaded input[type=text] to do the job, until the field is generally accepted.

So far, only Chrome, Safari and Opera have a neat implementation, but all other browsers are buggy. Some of them, don't even seem to support decimals (like BB10)!

Answer 5

Have you considered using Javascript for this?

$('input').val($('input').val().replace(',', '.'));

Answer 6

use the pattern

<input 
       type="number" 
       name="price"
       pattern="[0-9]+([\.,][0-9]+)?" 
       step="0.01"
       title="This should be a number with up to 2 decimal places."
>

good luck