如何处理HTML5inputtypes数字的浮点数和小数点分隔符
我build立的Web应用程序，主要是为移动浏览器。 我使用数字types的input字段，所以（大多数）移动浏览器只调用数字键盘，以获得更好的用户体验。 这个Web应用程序主要用在小数点分隔符是逗号的地方，而不是点，所以我需要处理两个小数点分隔符。
如何用点和逗号掩盖整个混乱？
我的发现：
桌面版Chrome
- inputtypes=数字
- 用户input“4,55”input字段
$("#my_input").val();返回“455”- 我无法从input中获得正确的值
桌面Firefox
- inputtypes=数字
- 用户input“4,55”input字段
-
$("#my_input").val();返回“4,55” - 这很好，我可以用点replace逗号，并获得正确的浮动
Android浏览器
- inputtypes=数字
- 用户input“4,55”input字段
- 当input失去焦点时，值被截断为“4”
- 迷惑用户
Windows Phone 8
- inputtypes=数字
- 用户input“4,55”input字段
-
$("#my_input").val();返回“4,55” - 这很好，我可以用点replace逗号，并获得正确的浮动
当用户可能使用逗号或点作为小数点分隔符，并且希望将htmlinputtypes保存为数字时，这种情况下的“最佳实践”是什么？以提供更好的用户体验？
我可以将逗号转换为点“绑定”，绑定关键事件，它是否与数字input工作？
编辑
Currenlty我没有任何解决scheme，如何从input哪个types设置为数字获得浮点值（作为string或数字）。 如果最终用户input“4,55”，Chrome总是返回“455”，Firefox返回“4,55”，这是很好的。
在Android（经过testing的4.2仿真器）中，当我input“4,55”到input字段并将焦点改变到其他地方时，input的数字被截断为“4”，这是非常烦人的。
我认为上面的答案中缺less的是需要为step属性指定一个不同的值，默认值为1 。 如果您希望input的validationalgorithm允许浮点值，请相应地指定一个步骤。
例如，我想要美元的金额，所以我指定了这样一个步骤：
<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.">
使用jQuery来检索值没有任何问题，但是您会发现直接使用DOM API来获取元素的validity.valid属性非常有用。
我有一个小数点类似的问题，但我意识到有一个问题的原因是因为Twitter Bootstrap添加到一个数字input无效值的样式。
这里有一个小提琴，演示step属性的添加使其工作，还testing当前值是否有效：
- 的jsfiddle
TL; DR： 将step属性设置为浮点值，因为它默认为1 。
注意 ：逗号不会为我validation，但我怀疑，如果我将我的操作系统语言/区域设置设置为使用逗号作为小数点分隔符的地方，它将工作。 *注意*：在Ubuntu / Gnome 14.04中，操作系统语言/键盘设置不是这种情况。
根据w3.org， 数字input的值属性被定义为一个浮点数 。 浮点数的语法似乎只接受点作为十进制分隔符。
我在下面列出了一些可能对您有所帮助的选项：
1.使用模式属性
使用模式属性，您可以使用正则expression式以HTML5兼容的方式指定允许的格式。 在这里，您可以指定允许使用逗号字符，如果模式失败，可以使用有用的反馈信息。
<input type="number" pattern="[0-9]+([,\.][0-9]+)?" name="my-num" title="The number input must start with a number and use either comma or a dot as a decimal character."/>
注意：跨浏览器支持差异很大。 它可能是完整的，部分的或不存在的
2. JavaScriptvalidation
你可以尝试绑定一个简单的callback，例如onchange （和/或blur ）事件，它将replace逗号或一起validation。
3.禁用浏览器validation##
第三，您可以尝试在数字input上使用formnovalidate属性，目的是一起禁用该字段的浏览器validation。
<input type="number" formnovalidate />
4.组合..？
<input type="number" pattern="[0-9]+([,\.][0-9]+)?" name="my-num" formnovalidate title="The number input must start with a number and use either comma or a dot as a decimal character."/>
是否使用逗号或小数点分隔符是完全取决于浏览器。 浏览器根据操作系统或浏览器的区域设置做出决定，或者某些浏览器从网站上获取提示。 我做了一个浏览器比较图，显示了不同的浏览器如何支持不同的本地化方法。 Safari是唯一可互换地处理逗号和句点的浏览器。
基本上，你作为一个networking作者不能真正控制这一点。 一些解决方法涉及使用两个input字段的整数。 这允许每个用户按照您的期望input数据。 它不是特别性感，但它会在所有用户的情况下工作。
使用.val()而不是.val() 。
input。 valueAsNumber [=值]
返回表示表单控件值的数字（如果适用）; 否则，返回null。
可以设置，更改值。
如果控件不是基于date或时间的，也不是数字，则会引发INVALID_STATE_ERRexception。
我的build议？ 根本不要使用jQuery。 我和你有同样的问题。 我发现$('#my_input').val()总是返回一些奇怪的结果。
尝试使用document.getElementById('my_input').valueAsNumber而不是$("#my_input").val(); 然后使用Number(your_value_retrieved)尝试创build一个Number。 如果这个值是NaN，你肯定知道这不是一个数字。
有一件事要补充的是，当你在input上写一个数字时，input实际上会接受几乎任何字符（我可以写欧元符号，一美元和所有其他特殊字符），所以最好使用.valueAsNumber而不是使用jQuery。
哦，顺便说一句，允许您的用户添加国际化（即：支持逗号而不是点来创build十进制数字）。 只要让Number()对象为您创build一些东西，这将是十进制安全的，可以这么说。
当你调用$("#my_input").val(); 它作为stringvariables返回。 所以使用parseFloat和parseInt进行转换。 当你使用parseFloat你的桌面或电话ITSELF理解variables的含义。
而且，你可以通过使用toFixed将一个浮点数转换为string，该浮点数的参数是位数，如下所示：
var i = 0.011; var ss = i.toFixed(2); //It returns 0.01
我还没有find一个完美的解决scheme，但我能做的最好的是使用type =“tel”并禁用html5validation（formnovalidate）：
<input name="txtTest" type="tel" value="1,200.00" formnovalidate="formnovalidate" />
如果用户input一个逗号，它会在我尝试的每个现代浏览器（最新的FF，IE，边缘，歌剧，铬，Safari浏览器桌面，Android的铬）的逗号输出。
主要问题是：
- 移动用户将看到他们的电话键盘，这可能不同于数字键盘。
- 更糟糕的是，电话键盘可能甚至没有逗号键。
对于我的用例，我只需要：
- 用逗号显示初始值（firefox将其取出为type = number）
- 不失败html5validation（如果有逗号）
- 让字段完全按照input进行读取（使用可能的逗号）
如果你有类似的要求，这应该为你工作。
注意：我不喜欢模式属性的支持。 formnovalidate似乎工作得更好。
听起来你想在你的数字input上使用toLocaleString（）。
国际化（数字格式“num.toLocaleString（）”）中也包含JS中数字的本地化， 不适用于Chrome
