如何使用html5输入类型编号处理浮点数和小数分隔符

Question

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

如何用点和逗号来掩盖这整个烂摊子？

我的发现:

桌面Chrome

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

桌面Firefox

• 输入类型=数字
• 用户输入"4,55"到输入字段
• $("#my_input").val(); 返回"4,55"
• 多数民众赞成,我可以用点替换逗号并得到正确的浮点数

Android浏览器

• 输入类型=数字
• 用户输入"4,55"到输入字段
• 当输入失去焦点时,值被截断为"4"
• 让用户感到困惑

Windows Phone 8

• 输入类型=数字
• 用户输入"4,55"到输入字段
• $("#my_input").val(); 返回"4,55"
• 多数民众赞成,我可以用点替换逗号并得到正确的浮点数

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

我可以将逗号转换为"动态"点,绑定键事件,它是否与数字输入一起使用？

编辑

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

同样令人讨厌的是,在Android(经过测试的4.2模拟器)中,当我输入"4,55"输入字段并将焦点更改为其他位置时,输入的数字将被截断为"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添加到具有无效值的数字输入的样式.

这是一个小提琴,演示了添加step属性使其工作,还测试当前值是否有效:

• 的jsfiddle

TL; DR: 将a step属性设置为浮点值,因为它默认为1.

注意:逗号不会对我进行验证,但我怀疑如果我将操作系统语言/区域设置设置为使用逗号作为小数分隔符的某个位置,它就可以工作.*注意注意*:在Ubuntu/Gnome 14.04中,操作系统语言/键盘设置*德语*不是这种情况.

Answer 2

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

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

1.使用pattern属性

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

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

2. JavaScript验证

您可以尝试将简单回调绑定到例如onchange(和/或blur)事件,该事件将替换逗号或一起验证所有事件.

3.禁用浏览器验证##

第三,您可以尝试在数字输入上使用formnovalidate属性,以便一起禁用该字段的浏览器验证.

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

Answer 3

是否对小数点分隔符使用逗号或句点完全取决于浏览器.浏览器根据操作系统或浏览器的区域设置做出决定,或者某些浏览器从网站上获取提示.我制作了一个浏览器比较图表,显示了不同的浏 Safari是唯一可以互换处理逗号和句点的浏览器.

基本上,作为网络作者,你无法真正控制它.一些解决方法涉及使用两个带整数的输入字段.这允许每个用户按照期望输入数据.它不是特别性感,但它适用于所有用户的每种情况.

Answer 4

用valueAsNumber而不是.val().

输入.valueAsNumber [= value]

返回表示表单控件值的数字(如果适用); 否则,返回null.
可以设置,更改值.
如果控件既不是基于日期或时间也不是数字,则抛出INVALID_STATE_ERR异常.

Answer 5

使用文本类型但强制显示数字键盘

<input value="12,4" type="text" inputmode="numeric" pattern="[-+]?[0-9]*[.,]?[0-9]+">

inputmode 标签是解决方案