如何使用 html5 输入类型编号处理浮点数和小数分隔符 [英] How to handle floats and decimal separators with html5 input type number
问题描述
我正在构建主要用于移动浏览器的网络应用程序.我使用数字类型的输入字段，因此(大多数)移动浏览器仅调用数字键盘以获得更好的用户体验.这个网页应用主要用于小数点分隔符是逗号而不是点的区域，所以我需要处理两个小数点分隔符.
Im building web app which is mainly for mobile browsers. Im using input fields with number type, so (most) mobile browsers invokes only number keyboard for better user experience. This web app is mainly used in regions where decimal separator is comma, not dot, so I need to handle both decimal separators.
如何用点和逗号覆盖整个混乱?
How to cover this whole mess with dot and comma?
我的发现:
桌面浏览器
- 输入类型=数字
- 用户在输入字段中输入4,55"
$("#my_input").val();返回455"- 我无法从输入中得到正确的值
桌面火狐
- 输入类型=数字
- 用户在输入字段中输入4,55"
$("#my_input").val();返回4,55"- 没关系，我可以用点替换逗号并获得正确的浮点数
Android 浏览器
- 输入类型=数字
- 用户在输入字段中输入4,55"
- 当输入失去焦点时，值被截断为4"
- 让用户感到困惑
Windows Phone 8
- 输入类型=数字
- 用户在输入字段中输入4,55"
$("#my_input").val();返回4,55"- 没关系，我可以用点替换逗号并获得正确的浮点数
在这种情况下，当用户可能使用逗号或点作为小数分隔符并且我希望将 html 输入类型保持为数字以提供更好的用户体验时，有哪些最佳实践"?
What are the "best practices" in this kind of situations when user might use comma or dot as decimal separator and I want to keep html input type as number, to provide better user experience?
我可以即时"将逗号转换为点，绑定键事件，它是否适用于数字输入?
Can I convert comma to dot "on the fly", binding key events, is it working with number inputs?
当前我没有任何解决方案，如何从类型设置为数字的输入中获取浮点值(作为字符串或数字).如果最终用户输入4,55"，Chrome 总是返回455"，Firefox 返回4,55"，这很好.
Currenlty I do not have any solution, how to get float value (as string or number) from input which type is set to number. If enduser enters "4,55", Chrome returns always "455", Firefox returns "4,55" which is fine.
此外，在 Android(经过测试的 4.2 模拟器)中，当我在输入字段中输入4,55"并将焦点转移到其他位置时，输入的数字会被截断为4"，这也很烦人.
Also it is quite annoying that in Android (tested 4.2 emulator), when I enter "4,55" to input field and change focus to somewhere else, the entered number get truncated to "4".
推荐答案
我认为上面的答案中缺少的是需要为 step 属性指定不同的值，该属性具有默认值1.如果您希望输入的验证算法允许浮点值，请相应地指定一个步骤.
I think what's missing in the answers above is the need to specify a different value for the step attribute, which has a default value of 1. If you want the input's validation algorithm to allow floating-point values, specify a step accordingly.
例如，我想要美元金额，所以我指定了这样一个步骤:
For example, I wanted dollar amounts, so I specified a step like this:
<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 属性很有用.
There's nothing wrong with using jQuery to retrieve the value, but you will find it useful to use the DOM API directly to get the elements's validity.valid property.
我在小数点上遇到了类似的问题，但我意识到存在问题的原因是 Twitter Bootstrap 添加到具有无效值的数字输入的样式.
I had a similar issue with the decimal point, but the reason I realized there was an issue was because of the styling that Twitter Bootstrap adds to a number input with an invalid value.
这里有一个小提琴演示了添加 step 属性使其工作，并测试当前值是否有效:
Here's a fiddle demonstrating that the adding of the step attribute makes it work, and also testing whether the current value is valid:
TL;DR: 将 step 属性设置为浮点值，因为它默认为 1.
TL;DR: Set the a step attribute to a floating-point value, because it defaults to 1.
注意:逗号对我无效，但我怀疑如果我将操作系统语言/区域设置设置为使用逗号作为小数分隔符的地方，它会工作.*注中*:在 Ubuntu/Gnome 14.04 中，操作系统语言/键盘设置 *德语* 并非如此.
NOTE: The comma doesn't validate for me, but I suspect that if I set my OS language/region settings to somewhere that uses a comma as the decimal separator, it would work. *note in note*: that was not the case for OS language/keyboard settings *German* in Ubuntu/Gnome 14.04.
这篇关于如何使用 html5 输入类型编号处理浮点数和小数分隔符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
