如何处理HTML5输入类型数字的浮点数和小数点分隔符 [英] How to handle floats and decimal separators with html5 input type number

问题描述

我建立的Web应用程序，主要是为移动浏览器。我使用数字类型的输入字段，所以（大多数）移动浏览器只调用数字键盘，以获得更好的用户体验。这个网络应用程序主要用于小数点分隔符是逗号，而不是点的地区，所以我需要处理两个小数点分隔符。

如何用点来覆盖整个混乱逗号？

我的发现：

桌面Chrome

• 输入类型=数字


• 用户输入4,55 li> $（＃my_input）。val（）; 返回455
  
• 我无法获得正确的值输入

桌面火狐

• 输入类型=数字


• 用户输入4,55输入字段
  
• $（ #my_input）。val（）; 返回4,55
  
• 这很好，我可以用逗号替换逗号并获得正确的浮点数


$ b Android浏览器




• 输入类型=数字


• 用户输入4,55输入字段


• 输入失去焦点时， / b>
  
  
  
• 对用户造成混淆

$ b

Windows Phone 8
$ b



• 输入类型=数字


• 用户输入4,55 / li>
  
• $（＃my_input）。val（）; 返回4,55
  
• 这很好，我可以用逗号替换逗号并得到正确的浮动






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





可以将逗号转换为点on绑定的关键事件，它是与数字输入工作？





编辑





现在我不有任何解决方案，如何从输入哪个类型设置为数字获得浮点值（作为字符串或数字）。如果最终用户输入4,55，Chrome会始终返回455，Firefox返回4,55这是很好的。





另外， （经过测试的4.2仿真器），当我输入4,55到输入字段并将焦点改变到其他地方，输入的数字被截断为4。 解决方案我认为上面的答案缺少的是需要为 step 属性指定一个不同的值，该属性的默认值为 1 。如果你想输入的验证算法允许浮点值，相应地指定一个步骤。



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



 < input type =numbername =price
 pattern =[0-9] + （[\。，] [0-9] +）？ step =0.01
 title =这应该是一个最多2位小数的数字。> 
  

使用jQuery检索值没有任何问题，但是您会发现使用DOM API直接获取元素的 validity.valid 属性。





我有一个与小数点类似的问题，但我意识到有一个问题的原因是因为Twitter Bootstrap添加到一个数字输入与一个无效值的样式。





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





• jsFiddle






TL; DR： 将步骤属性设置为浮点值，因为它默认为 1 。


$ b 注意 t验证我，但我怀疑，如果我设置我的操作系统语言/地区设置到某个地方使用逗号作为小数点分隔符，它会工作。 * note备注*：在Ubuntu / Gnome 14.04中，操作系统语言/键盘设置不是这样的情况。*德语*



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?

My findings:

Desktop Chrome

• Input type=number
• User enters "4,55" to input field
• $("#my_input").val(); returns "455"
• I can not get the correct value from input

Desktop Firefox

• Input type=number
• User enters "4,55" to input field
• $("#my_input").val(); returns "4,55"
• Thats fine, I can replace comma with dot and get correct float

Android browser

• Input type=number
• User enters "4,55" to input field
• When input loses focus, value is truncated to "4"
• Confusing to user

Windows Phone 8

• Input type=number
• User enters "4,55" to input field
• $("#my_input").val(); returns "4,55"
• Thats fine, I can replace comma with dot and get correct float

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?

EDIT

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.

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

解决方案

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

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.

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.

Here's a fiddle demonstrating that the adding of the step attribute makes it work, and also testing whether the current value is valid:

• jsFiddle

TL;DR: Set the a step attribute to a floating-point value, because it defaults to 1.

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屋！