如何使用html5输入类型号处理浮点数和十进制分隔符

Question

Im正在构建主要针对移动浏览器的web应用程序。Im使用数字类型的输入字段，所以（大多数）移动浏览器只调用数字键盘以获得更好的用户体验。这个web应用程序主要用于十进制分隔符是逗号而不是点的区域，所以我需要处理两个十进制分隔符。

如何用点和逗号来掩盖这一切？

我的调查结果：

桌面浏览器

• 输入类型=数字
• 用户输入4,55输入字段
• $（"#my_input"）. val（）；返回"455"
• 我不能从输入得到正确的值

桌面火狐

• 输入类型=数字
• 用户输入4,55输入字段
• $（"#my_input"）. val（）；返回"4,55"
• 这很好，我可以用点代替逗号，得到正确的浮动

Android浏览器

• 输入类型=数字

Windows Phone 8

• 输入类型=数字
• 用户输入4,55输入字段
• $（"#my_input"）. val（）；返回"4,55"
• 这很好，我可以用点代替逗号，得到正确的浮动

在这种情况下，当用户可能使用逗号或点作为小数分隔符，我想保持html输入类型为数字，以提供更好的用户体验时，“最佳实践”是什么？

我可以将逗号转换为点“动态”，绑定关键事件，它是否使用数字输入？

目前我没有任何解决方案，如何从设置为数字的输入中获取浮点值（字符串或数字）。如果最终用户输入“4,55”，Chrome将始终返回“455”，Firefox将返回“4,55”，这很好。

也很烦人的是，在Android（测试4.2模拟器），当我输入4,55输入字段和改变焦点到其他地方，输入的数字被截断为4。

Answer 1

是否使用逗号或句点作为小数分隔符完全取决于浏览器。浏览器根据操作系统或浏览器的区域设置做出决定，或者某些浏览器从网站获取提示。我制作了一个浏览器对比图，显示了不同的浏览器如何支持处理不同的本地化方法。Safari是唯一可以互换处理逗号和句点的浏览器。

基本上，你作为一个网络作者不能真正控制这一点。一些变通方法包括使用两个带整数的输入字段。这允许每个用户按预期输入数据。它不是特别性感，但它将在每种情况下为所有用户工作。

Answer 2

根据w3。org数字输入的值属性定义为浮点数。浮点数的语法似乎只接受点作为十进制分隔符。

我在下面列出了一些可能对您有帮助的选项：

通过pattern属性，您可以使用与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."/>

注意：跨浏览器支持变化很大。它可能是完整的、部分的或不存在的。。

您可以尝试将一个简单的回调绑定到例如onchange（和/或blur）事件，该事件将同时替换逗号或进行验证。

第三，您可以尝试在数字输入上使用formnovalester属性，目的是同时禁用该字段的浏览器验证。

<input type="number" formnovalidate />

<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."/>

Answer 3

我认为上面的答案缺少的是需要为步骤属性指定一个不同的值，该属性的默认值为1。如果希望输入的验证算法允许浮点值，请相应地指定一个步骤。

例如，我想要美元金额，所以我指定了这样一个步骤：

 <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引导程序使用无效值添加到数字输入中的样式。

这里有一个小提琴演示添加步骤属性使其工作，并测试当前值是否有效：

• JSFIDLE

TL；DR：将astep属性设置为浮点值，因为它默认为1。

注意：逗号对我来说并不有效，但我怀疑如果我将操作系统语言/区域设置设置为使用逗号作为小数分隔符的位置，它会起作用*注*：Ubuntu/Gnome 14.04中的操作系统语言/键盘设置*德语*并非如此。