javascript - 如何使用HTML5输入类型编号处理浮点数和小数点分隔符(How to handle floats and decimal separators with html5 input type number)

Question

Im building web app which is mainly for mobile browsers.

(我正在构建主要用于移动浏览器的Web应用程序。)

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.

(此Web应用程序主要用于小数点分隔符是逗号而不是点的区域，因此我需要处理两个小数点分隔符。)

How to cover this whole mess with dot and comma?

(如何用点和逗号覆盖整个混乱局面？)

My findings:

(我的发现：)

Desktop Chrome

(桌面版Chrome)

• Input type=number

  (输入类型=数字)

• User enters "4,55" to input field

  (用户在输入字段中输入“ 4,55”)

• $("#my_input").val(); returns "455"

  (返回“ 455”)

• I can not get the correct value from input

  (我无法从输入中获取正确的值)

Desktop Firefox

(桌面版Firefox)

• Input type=number

  (输入类型=数字)

• User enters "4,55" to input field

  (用户在输入字段中输入“ 4,55”)

• $("#my_input").val(); returns "4,55"

  (返回“ 4,55”)

• Thats fine, I can replace comma with dot and get correct float

  (很好，我可以用点替换逗号并获得正确的浮点数)

Android browser

(Android浏览器)

• Input type=number

  (输入类型=数字)

• User enters "4,55" to input field

  (用户在输入字段中输入“ 4,55”)

• When input loses focus, value is truncated to "4"

  (输入失去焦点时，值将被截断为“ 4”)

• Confusing to user

  (给用户造成困扰)

Windows Phone 8

(Windows Phone 8)

• Input type=number

  (输入类型=数字)

• User enters "4,55" to input field

  (用户在输入字段中输入“ 4,55”)

• $("#my_input").val(); returns "4,55"

  (返回“ 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?

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

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.

(Currenlty我没有任何解决方案，如何从类型设置为数字的输入中获取浮点值（字符串或数字）。)

If enduser enters "4,55", Chrome returns always "455", Firefox returns "4,55" which is fine.

(如果最终用户输入“ 4,55”，则Chrome始终返回“ 455”，Firefox返回“ 4,55”，可以。)

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

(同样令人烦恼的是，在Android（经过测试的4.2仿真器）中，当我输入“ 4,55”以输入字段并将焦点更改为其他位置时，输入的数字将被截断为“ 4”。)

  ask by devha translate from so

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

(我认为上述答案中缺少的是需要为step属性指定不同的值，该属性的默认值为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.

(使用jQuery检索值没有错，但是您会发现直接使用DOM API来获取元素的validity.valid属性很有用。)

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.

(我的小数点也有类似的问题，但我意识到存在问题的原因是因为Twitter Bootstrap的样式添加到具有无效值的数字输入中。)

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

(这是一个小提琴，它证明了step属性的添加使其起作用，并且还测试了当前值是否有效：)

• jsFiddle

  (jsFiddle)

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

(TL; DR： 将step属性设置为浮点值，因为它的默认值为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.

(注意 ：逗号不能为我验证，但是我怀疑如果我将OS语言/区域设置设置为使用逗号作为小数点分隔符的某个地方，它将起作用。)

*note in note*: that was not the case for OS language/keyboard settings *German* in Ubuntu/Gnome 14.04.

(*注意*：在Ubuntu / Gnome 14.04中，操作系统语言/键盘设置*德语*并非如此。)