Force decimal point instead of comma in HTML5 number input (client-side)
HtmlGoogle ChromeInputNumbersDecimalHtml Problem Overview
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 step
attribute do not seem to work.
Html Solutions
Solution 1 - Html
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 - Html
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 - Html
According to the spec, You can use any
as the value of step
attribute:
<input type="number" step="any">
Solution 4 - Html
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 - Html
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
is1
- thus the default domain is integers (between
min
andmax
, 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.
Solution 6 - Html
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)!
Solution 7 - Html
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.
Solution 8 - Html
As far as I understand it, the HTML5 input type="number
always returns input.value
as a string
.
Apparently, input.valueAsNumber
returns the current value as a floating point number. You could use this to return a value you want.
Solution 9 - Html
one option is javascript parseFloat()
...
never do parse a "text chain" --> 12.3456
with point to a int... 123456
(int remove the point)
parse a text chain to a FLOAT...
to send this coords to a server do this sending a text chain. HTTP
only sends TEXT
in the client keep out of parsing the input coords with "int
", work with text strings
if you print the cords in the html with php or similar... float to text and print in html
Solution 10 - Html
Have you considered using Javascript for this?
$('input').val($('input').val().replace(',', '.'));
Solution 11 - Html
- 51,983 is a string type number does not accept comma
so u should set it as text
<input type="text" name="commanumber" id="commanumber" value="1,99" step='0.01' min='0' />
replace , with .
and change type attribute to number
$(document).ready(function() {
var s = $('#commanumber').val().replace(/\,/g, '.');
$('#commanumber').attr('type','number');
$('#commanumber').val(s);
});
Check out http://jsfiddle.net/ydf3kxgu/
Hope this solves your Problem
Solution 12 - Html
I have written a custom piece of code to do this
If you want to replace ,
with .
, remove translate_decimals functions completely.
var input = document.querySelector('input[role="custom-number"]');
var bincr = document.querySelector('button[role="increment"]');
var bdecr = document.querySelector('button[role="decrement"]');
function translate_decimals(side = 0)
{
input.value = (side == ',' ? input.value.replace('.',',') : input.value.replace(',','.'));
}
translate_decimals(',');
bincr.addEventListener('click', ()=>{
if (input.hasAttribute('max'))
{
if (input.value.substr(0,input.getAttribute('max').length) == input.getAttribute('max').substr(0,input.getAttribute('max').length))
{
return;
}
else
{
translate_decimals('.');
let temp = input.value;
input.value = "";
input.value = (input.hasAttribute('step') ? (parseFloat(temp) + parseFloat(input.getAttribute('step'))) : temp++);
translate_decimals(',');
}
}
});
bdecr.addEventListener('click', ()=>{
if (input.hasAttribute('min'))
{
if (input.value.substr(0,input.getAttribute('min').length) == input.getAttribute('min').substr(0,input.getAttribute('min').length))
{
return;
}
else
{
translate_decimals('.');
input.value = (input.hasAttribute('step') ? (input.value - input.getAttribute('step')) : input.value--);
translate_decimals(',');
}
}
});
/* styling increment & decrement buttons */
button[role="increment"],
button[role="decrement"] {
width:32px;
}
<input type="text" role="custom-number" step="0.01" min="0" max="0" lang="en" value="1.99">
<button role="increment">+</button>
<button role="decrement">-</button>
Solution 13 - Html
I needed to ensure values can still be entered with a comma instead of a point as a decimal separator. This seems to be an age-old problem. Background info can be found following these links:
- https://www.slightfuture.com/webdev/html5-input-number-localization.html
- https://codepen.io/aminimalanimal/full/bdOzRG
I finally solved it with a little bit of jQuery. Replacing the commas with dots onChange. This seems to be working good so far in latest Firefox, Chrome and Safari.
$('input[type=number]').each(function () {
$(this).change(function () {
var $replace = $(this).val().toString().replace(/,/g, '.');
$(this).val($replace);
})
});
Solution 14 - Html
The below is a work arround to enable the input of a comma and replace it by a dod. It works very well for continious input of the user.
The idea is to have an input that can be parsed into a number "123." cannot be parsed, but "123.0" can be parsed, and so the type of the input can be changed back from "text" to "number" and it still works. The selection is "just" to enable continious input, so the user overwrites the additional number
HTML element:
<input type="number" id="numberinput">
Javascript
document.getElementById("numberinput").keydown = function(event)
{
if (
event.target.getAttribute('type') === "number" &&
event.key === "," &&
event.target.value.indexOf(".") === -1)
{
event.preventDefault();
event.target.setAttribute("type","text");
event.target.value = event.target.value + ".0";
event.target.setSelectionRange(event.target.value.length - 1, event.target.value.length);
event.target.setAttribute("type","number");
}
}
Solution 15 - Html
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
Solution 16 - Html
HTML step Attribute
<input type="number" name="points" step="3">
>Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.
>Tip: The step attribute can be used together with the max and min attributes to create a range of legal values.
Note: The step attribute works with the following input types: number, range, date, datetime, datetime-local, month, time and week.