javascript - 如何处理带有 html5 输入类型数字的 float 和小数点分隔符

Question

我正在构建主要用于移动浏览器的网络应用程序。我使用数字类型的输入字段，因此(大多数)移动浏览器仅调用数字键盘以获得更好的用户体验。此网络应用程序主要用于小数点分隔符为逗号而不是点的地区，因此我需要处理两个小数点分隔符。

如何用点和逗号覆盖整个困惑？

我的发现:

桌面版 Chrome

• 输入类型=数字
• 用户在输入字段中输入“4,55”
• $("#my_input").val(); 返回“455”
• 我无法从输入中得到正确的值

桌面版 Firefox

• 输入类型=数字
• 用户在输入字段中输入“4,55”
• $("#my_input").val(); 返回“4,55”
• 没关系，我可以用点替换逗号并得到正确的 float

安卓浏览器

• 输入类型=数字
• 用户在输入字段中输入“4,55”
• 当输入失去焦点时，值被 chop 为“4”
• 让用户感到困惑

Windows 手机 8

• 输入类型=数字
• 用户在输入字段中输入“4,55”
• $("#my_input").val(); 返回“4,55”
• 没关系，我可以用点替换逗号并得到正确的 float

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

我能否“即时”将逗号转换为点，绑定(bind)键事件，它是否适用于数字输入？

编辑

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

同样令人恼火的是，在 Android(已测试 4.2 模拟器)中，当我在输入字段中输入“4,55”并将焦点更改到其他地方时，输入的数字被 chop 为“4”。

Answer 1

我认为上面的答案中缺少的是需要为 step 属性指定一个不同的值，它的默认值为 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 Bootstrap 添加到具有无效值的数字输入的样式。

这是一个 fiddle ，演示了添加 step 属性使其工作，并且还测试了当前值是否有效:

• jsFiddle

TL;DR: 将 step 属性设置为浮点值，因为它默认为 1。

注意:逗号对我无效，但我怀疑如果我将我的操作系统语言/区域设置设置为使用逗号作为小数点分隔符的某个地方，它会工作。 *注中注*:Ubuntu/Gnome 14.04 中的操作系统语言/键盘设置 *德语* 并非如此。