Chrome 上浮点数的 HTML 5 input type="number" 元素答案

【问题标题】：HTML 5 input type="number" element for floating point numbers on ChromeChrome 上浮点数的 HTML 5 input type="number" 元素
【发布时间】：2014-05-04 11:34:26
【问题描述】：

我需要让用户输入浮点数，所以我使用了以下元素：

<input type="number" name="my_number" placeholder="Enter number"/>

在 Firefox 上运行良好，但当我尝试输入小数时，Chrome 会抱怨数字不是整数。这对我来说是个问题。如果我输入 step 属性，那么 Chrome 允许浮点数：

<input type="number" name="my_number" placeholder="Enter number" step="0.1"/>

但问题是无法输入 0.15...step 似乎不适合我的需要。 W3C spec 在 input type="number" 的所有属性中都提到了浮点数。

如何让 Chrome 接受没有 step 属性的浮点数？

【问题讨论】：

标签： html validation google-chrome html-input

【解决方案1】：

试试这个

<input onkeypress='return event.charCode >= 48 && 
                          event.charCode <= 57 || 
                          event.charCode == 46'>

【讨论】：

&& !isNaN(this.value) 或者 this.value.split('.').length==1

【解决方案2】：

注意：如果您使用的是 AngularJS，那么除了更改步长值之外，您可能还需要在 html 输入中设置 ng-model-options="{updateOn: 'blur change'}"。

这样做的原因是为了减少验证器的运行频率，因为它们会阻止用户输入小数点。这样，用户可以输入小数点，验证器在用户模糊后生效。

【讨论】：

【解决方案3】：

如果您的目标是小数点后 2 位，请尝试 <input type="number" step="0.01" /> :-)。

【讨论】：

你当之无愧，最简单的解决方案，我不得不搜索它几个几乎都出错了......谢谢

【解决方案4】：

试试<input type="number" step="any" />

不会出现验证问题，箭头的步长为“1”

约束验证：当元素具有允许的值步时，并且应用算法将字符串转换为数字的结果由元素的值给出的字符串是一个数字，并且从步基中减去的数字不是的整数倍允许的值步，该元素正遭受步不匹配。

以下范围控件仅接受 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

【讨论】：

效果很好！这是规范的一部分还是只是一个奇怪的解决方法？
这在 Chrome 中可以正常工作，但在 Firefox 31 ESR 或 Firefox 34 中不行。我不得不求助于 input="text" 来获得我想要的。 Firefox 和 HTML5 确实需要齐心协力。
我遇到的一个问题，即使在 Chrome 上，也可以在输入中输入“e”或“ee”（因为 e 是一个数字），但在 Angular 中，该值最终为“未定义” "。