Chrome 上浮点数的 HTML 5 input type="number" 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22654678/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML 5 input type="number" element for floating point numbers on Chrome
提问by at.
I need to have users enter floating point numbers, so I use the following element:
我需要让用户输入浮点数，所以我使用以下元素：
<input type="number" name="my_number" placeholder="Enter number"/>
Works great on Firefox, but Chrome complains that the number is not an integer when I try to enter a decimal. That's a problem for my case. If I enter a stepattribute, then Chrome allows the floating point number:
在 Firefox 上运行良好，但是当我尝试输入小数时，Chrome 抱怨该数字不是整数。这对我来说是个问题。如果我输入一个step属性，那么 Chrome 允许浮点数：
<input type="number" name="my_number" placeholder="Enter number" step="0.1"/>
But then the problem is 0.15 can't be entered... The stepdoesn't appear to suit my needs. The W3C specmentions floating-point numbers throughout the attributes of input type="number".
但随后的问题是无法输入 0.15...step似乎不适合我的需要。在W3C规范整个的属性提到浮点数input type="number"。
How do I get Chrome to accept floating point numbers without the stepattribute?
如何让 Chrome 接受没有step属性的浮点数？
回答by Gilles V.
Try <input type="number" step="any" />
尝试 <input type="number" step="any" />
It won't have validation problems and the arrows will have step of "1"
它不会有验证问题，箭头的步长为“1”
Constraint validation: When the element has an allowed value step, and the result of applying the algorithm to convert a string to a number to the string given by the element's value is a number, and that number subtracted from the step base is not an integral multiple of the allowed value step, the element is suffering from a step mismatch.
The following range control only accepts values in the range 0..1, and allows 256 steps in that range:
<input name=opacity type=range min=0 max=1 step=0.00392156863>The following control allows any time in the day to be selected, with any accuracy (e.g. thousandth-of-a-second accuracy or more):
<input name=favtime type=time step=any>Normally, time controls are limited to an accuracy of one minute.
约束验证：当元素有一个允许的值步长，并且应用算法将字符串转换为数字的结果为元素值给出的字符串是一个数字，并且从步长基数中减去的那个数字不是整数允许值步长的倍数，该元素遇到步长不匹配。
以下范围控件仅接受范围 0..1 中的值，并允许该范围内的 256 步：
<input name=opacity type=range min=0 max=1 step=0.00392156863>以下控件允许选择一天中的任何时间，具有任何精度（例如，千分之一秒或更高的精度）：
<input name=favtime type=time step=any>通常，时间控制仅限于一分钟的精度。
http://www.w3.org/TR/2012/WD-html5-20121025/common-input-element-attributes.html#attr-input-step
http://www.w3.org/TR/2012/WD-html5-20121025/common-input-element-attributes.html#attr-input-step
回答by codermd
Try <input type="number" step="0.01" />if you are targeting 2 decimal places :-).
<input type="number" step="0.01" />如果您的目标是小数点后 2 位，请尝试:-)。
回答by ginna
Note: If you're using AngularJS, then in addition to changing the step value, you may have to set ng-model-options="{updateOn: 'blur change'}"on the html input.
注意：如果您使用的是 AngularJS，那么除了更改 step 值之外，您可能还需要ng-model-options="{updateOn: 'blur change'}"在 html 输入上进行设置。
The reason for this is in order to have the validators run less often, as they are preventing the user from entering a decimal point. This way, the user can type in a decimal point and the validators go into effect after the user blurs.
这样做的原因是为了减少验证器的运行频率，因为它们会阻止用户输入小数点。这样，用户可以输入小数点，验证器在用户模糊后生效。
回答by shahzain ali
Try this
尝试这个
<input onkeypress='return event.charCode >= 48 &&
event.charCode <= 57 ||
event.charCode == 46'>