Html 在 HTML5 数字输入中强制小数点而不是逗号（客户端）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6178332/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Force decimal point instead of comma in HTML5 number input (client-side)
提问by chocolata
I have seen that some browsers localize the input type="number"notation of numbers.
我已经看到一些浏览器本地化了input type="number"数字的符号。
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.
所以现在，在我的应用程序显示经度和纬度坐标的字段中，我得到了“51,983”之类的东西，它应该是“51.982559”。我的解决方法是input type="text"改用，但我想使用正确显示小数的数字输入。
Is there a way to force browsers to use a decimal pointin 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)).
（不用说，在我的应用程序中，我无论如何都在服务器端纠正了这一点，但在我的设置中，我也需要它在客户端正确（因为一些 JavaScript））。
Thanks in advance.
提前致谢。
UPDATEAs 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.
更新截至目前，在 Windows 7 上检查 Chrome 版本 28.0.1500.71 m，输入的数字不接受用逗号格式化的小数。带有该step属性的建议建议似乎不起作用。
回答by Ashraf Sabry
Currently, Firefox honors the language of the HTML element in which the input resides. For example, try this fiddle in Firefox:
目前，Firefox 遵循输入所在的 HTML 元素的语言。例如，在 Firefox 中试试这个 fiddle：
http://jsfiddle.net/ashraf_sabry_m/yzzhop75/1/
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 BODYtag is given the attribute lang="ar-EG".
您会看到数字是阿拉伯语，逗号用作小数点分隔符，阿拉伯语就是这种情况。这是因为BODY标签被赋予了属性lang="ar-EG"。
Next, try this one:
接下来，试试这个：
http://jsfiddle.net/ashraf_sabry_m/yzzhop75/2/
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 DIVgiven the attribute lang="en-US".
由于输入包含在DIV给定的属性中，因此显示为点作为小数点分隔符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.
因此，您可能会采用的一种解决方案是使用设置为使用使用点作为小数点分隔符的区域性的容器元素包装您的数字输入。
回答by Peter
With the stepattribute specified to the precision of the decimals you want, and the langattribute [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:
使用指定为所需小数精度的step属性和lang属性 [设置为使用句点格式化小数的区域设置]，您的 html5 数字输入将接受小数。例如。取 10.56 之类的值；我的意思是 2 个小数位数字，请执行以下操作：
<input type="number" step="0.01" min="0" lang="en" value="1.99">
You can further specify the maxattribute for the maximum allowable value.
您可以进一步为最大允许值指定max属性。
EditAdd a langattribute to the input element with a locale value that formats decimals with point instead of comma
编辑将lang属性添加到具有区域设置值的输入元素，该值使用点而不是逗号格式化小数
回答by Halil ?zgür
回答by zian974
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.
在输入上使用 lang 属性。我的网络应用程序 fr_FR 上的语言环境，输入数字上的 lang="en_EN" 并且我可以无差别地使用逗号或点。Firefox 总是显示一个点，Chrome 显示一个逗号。但两个分隔符都是有效的。
回答by opalenzuela
Sadly, the coverage of this input field in the modern browsers is very low:
遗憾的是，这个输入字段在现代浏览器中的覆盖率非常低：
http://caniuse.com/#feat=input-number
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.
因此，我建议期待回退并依靠大量编程加载的 input[type=text] 来完成这项工作，直到该领域被普遍接受。
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)!
到目前为止，只有 Chrome、Safari 和 Opera 有一个简洁的实现，但所有其他浏览器都有缺陷。其中一些，甚至似乎不支持小数（如 BB10）！
回答by Andrea Aloi
I don't know if this helps but I stumbled here when searching for this same problem, only from an inputpoint 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:
我不知道这是否有帮助，但我在搜索同样的问题时偶然发现了这里，仅从输入的角度来看（即我注意到我<input type="number" />在输入值时接受了逗号和点，但只有后者是绑定到我分配给输入的 angularjs 模型）。所以我通过记下这个快速指令来解决：
.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.
然后，在我的 html 上，简单地：<input type="number" ng-model="foo" replace-comma />将即时用点替换逗号，以防止用户输入无效（从 javascript 的角度来看，而不是语言环境！）数字。干杯。
回答by Matty K
I found a blog article which seems to explain something related:
HTML5 input type=number and decimals/floats in Chrome
我发现一篇博客文章似乎解释了一些相关的内容：
Chrome 中的 HTML5 input type=number and decimals/floats
In summary:
总之：
- the
stephelps to define the domain of valid values - the default
stepis1 - thus the default domain is integers (between
minandmax, inclusive, if given)
- 将
step有助于定义有效值的域 - 默认
step是1 - 因此默认域是整数（在
min和之间max，包括，如果给定）
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,983is actually a strangely-parsed fifty-one thousand, nine hundred and eight-three.
我认为这与使用逗号作为千位分隔符与使用逗号作为小数点的歧义相混淆，而你51,983的实际上是一个奇怪地解析的五万一千、九百零八三。
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:
显然您可以使用step="any"将域扩大到范围内的所有有理数，但是我自己没有尝试过。对于纬度和经度，我已成功使用：
<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.
它可能不漂亮，但它有效。
回答by Cleber Spirlandeli
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
祝你好运
回答by Zeeshan Eqbal
HTML step Attribute
HTML 步骤属性
<input type="number" name="points" step="3">
Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.
示例：如果 step="3"，则合法数字可以是 -3、0、3、6 等。
Tip: The step attribute can be used together with the max and min attributes to create a range of legal values.
提示： step 属性可以与 max 和 min 属性一起使用以创建一系列合法值。
Note:The step attribute works with the following input types: number, range, date, datetime, datetime-local, month, time and week.
注意：step 属性适用于以下输入类型：数字、范围、日期、日期时间、本地日期时间、月份、时间和周。
回答by Bosnian Coder
I have written a custom piece of code to do this
我编写了一段自定义代码来执行此操作
If you want to replace ,with ., remove translate_decimalsfunctions completely.
如果要替换,为.，请完全删除translate_decimals函数。
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>