javascript type=”number” 和基于文化的十进制分隔符的 html 标签输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26890209/
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
html tag input of type=”number” and culture based decimal separator
提问by Developer
What I need is in English browser when I open website that has another culture and UI (i.e. Sweden) to see the proper decimal separator.
当我打开具有另一种文化和 UI（即瑞典）的网站以查看正确的小数点分隔符时，我需要的是在英文浏览器中。
How to archive it?
如何存档？
<input type="number" step="0.1" pattern="[0-9]+([\,][0-9]+)?" min="0" max="5" />
If even I apply any number like "0,1" with the next click of spinner Browser reset it to "0.2" which has a dot instead of comma.
如果我在下一次单击微调器浏览器时应用诸如“0,1”之类的任何数字，将其重置为“0.2”，它有一个点而不是逗号。
So how to keep proper decimal separator?
那么如何保持正确的小数点分隔符呢？
Any clue how to fix it with jQuery?
任何线索如何用jQuery修复它？
采纳答案by DreamTeK
Browsers do not support HTML5 number inputs seperators very well and each users experience would differ based on their computers regional settings. It may not be wise to force the seperator to be a comma.
浏览器不能很好地支持 HTML5 数字输入分隔符，并且每个用户的体验会根据他们的计算机区域设置而有所不同。强制分隔符为逗号可能并不明智。
The only way I can think of is to use javascript. Here is one example using normal input field. Unfortunately you will lose the html5 input attributes associated with number inputs.
我能想到的唯一方法是使用javascript。这是一个使用普通输入字段的示例。不幸的是，您将丢失与数字输入相关的 html5 输入属性。
var Inputs = document.querySelectorAll('input');
for (var i=0; i<Inputs.length; i++) {
Inputs[i].onblur = function() {
this.value = this.value.replace('.',',');
}
}
function multiplyAndPopulate() {
var A1 = theForm.A1field.value.replace(',','.');
var A2 = theForm.A2field.value.replace(',','.');
var R1 = (A1*A2);
if (isNaN(R1) == true) {
alert('Invalid.');
return false;
}
else {
theForm.R1field.value = R1;
theForm.R1field.value = theForm.R1field.value.replace('.',',');
}
}<input type="text" pattern="[0-9]+([\,][0-9]+)?" MaxLength="3"/>回答by Grzegorz Krauze
Currently answers provided with this thread lead to the solution of changing type="number"to type="text"which is step back from user point of view.
目前解答了设置有该螺纹螺距改变的溶液type="number"到type="text"这是从视图用户点退一步。
I handled this problem in different way.
我以不同的方式处理了这个问题。
Handling data from backend - form preparation.
处理来自后端的数据 - 表单准备。
Forms usually provide default values or values to edit for some field. That's why it is important how you provide values to input in form. Some frameworks can localize value for you before binding them to the form that's why values coming from your server (database and programming language) can be either comma separated or dot separated. If you provide 0.01(most cases) as input value you will get no error in any browser on client side but if you provide value of 0,01(localized value) the value will not be visible in the browser but will be provided in input as an attribute and you will get a console error: it is not proper number value. So the first thing to do is replacing "," with "." when rendering the form on server side so that on client side there is always dot separated value.
表单通常提供默认值或某些字段的编辑值。这就是为什么在表单中为输入提供值很重要的原因。一些框架可以在将它们绑定到表单之前为您本地化值，这就是为什么来自您的服务器（数据库和编程语言）的值可以用逗号分隔或点分隔的原因。如果您提供0.01（大多数情况下）作为输入值，您在客户端的任何浏览器中都不会出错，但是如果您提供0,01（本地化值）的值，则该值将在浏览器中不可见，但将作为属性在输入中提供，并且你会得到一个控制台错误：it is not proper number value。所以首先要做的是用“.”替换“，”。在服务器端呈现表单时，以便在客户端总是有点分隔值。
If you leave it at this point your form will be vulnerable to locale settings in the browser. If you print such form in Firefox with locale en-US you will see an input with dot separated value but if you print this form with Chrome with locale fr-FR you will see no value which is comma separated. There is a simple solution if you want to enforce specific locale. With this attribute:
如果您此时离开它，您的表单将容易受到浏览器中区域设置的影响。如果您在 Firefox 中使用区域设置 en-US 打印此类表单，您将看到带有点分隔值的输入，但如果您使用区域设置 fr-FR 使用 Chrome 打印此表单，您将看不到逗号分隔的值。如果您想强制执行特定的语言环境，有一个简单的解决方案。有了这个属性：
<html lang="en-US" >
you will get dots in your input type number and this one will give you comma separated value:
你会在你的输入类型号中得到点，这个会给你逗号分隔的值：
<html lang="pl-PL" >
The lang attribute can also be set at input itself.
lang 属性也可以在输入本身设置。
Frontend handling.
前端处理。
In Firefox with form set to specific locale you will get a validation error if you will try to put dot or comma as a separator - according to your lang setting. So remember that you cannot set novalidateattribute on form otherwise the value sent on submit will be empty.
Chrome will automatically convert dot to comma or comma to dot for you.
在将表单设置为特定语言环境的 Firefox 中，如果您尝试将点或逗号作为分隔符 - 根据您的 lang 设置，您将收到验证错误。所以请记住，您不能novalidate在表单上设置属性，否则提交时发送的值将为空。Chrome 会自动为您将点转换为逗号或逗号转换为点。
Those are the basic rules for me. Further if you use some JS methods such as parseFloat() you will get dots in the value so you will have to replace dots with comma if you are in comma-like locale.
这些是我的基本规则。此外，如果您使用一些 JS 方法，例如 parseFloat()，您将在值中得到点，因此如果您处于类似逗号的语言环境中，则必须用逗号替换点。
回答by Razvan Dumitru
If i understand, this is what you want to accomplish. The whatDecimalSeparator function is telling you which separator is used in ur current browser
如果我明白，这就是你想要完成的。whatDecimalSeparator 函数告诉您当前浏览器中使用的分隔符
function whatDecimalSeparator() {
var n = 1.1;
n = n.toLocaleString().substring(1, 2);
return n;
}
$(document).ready(function(){
var currentSeparator = whatDecimalSeparator();
var currentStep = '0'+ currentSeparator + '1';
$('.js-numberInput')[0].step = currentStep;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="js-numberInput" type="number" step="0.1" pattern="[0-9]+([\,][0-9]+)?" min="0" max="5" />UPDATE (comment by Razvan Dumitru):
更新（Razvan Dumitru 评论）：
I find this comment:
The HTML5 input type=number is inadequate from the localization point of view, due to both the definition and the implementations. It is meant to be localized but as per the locale of the browser, which you cannot set or even know as a designer/author.
in this thread Localization of input type number. One idea is to handle by yourself all this logic and get rid of the type="number" input, if you can do that. You can use a and use custom plugin for spinners
我发现这个评论：
由于定义和实现，HTML5 input type=number 从本地化的角度来看是不够的。它旨在进行本地化，但根据浏览器的区域设置，您无法设置或什至作为设计者/作者知道。
在此线程 中输入类型 number 的本地化。一个想法是自己处理所有这些逻辑，如果可以的话，去掉 type="number" 输入。您可以为微调器使用和使用自定义插件
