为什么我不能在 HTML5 数字字段中输入 500？答案

【问题标题】：Why can't I enter 500 in a HTML5 number field?为什么我不能在 HTML5 数字字段中输入 500？
【发布时间】：2016-07-10 02:52:43
【问题描述】：

我的 HTML5 数字字段不断收到奇怪的意外验证错误。这是我的 HTML 代码：

<input type="number" name="width" maxlength="5" placeholder="Width" value="733.95591182365" />&nbsp;Width<br />

当我输入 500 并提交表单时，我收到错误：“请输入一个有效值。最接近的两个有效值是 499.95591182365 和 500.95591182365。”

我已经解决了问题。问题是这个value="733.95591182365"。我已将 PHP 代码更改为将小数四舍五入为整数，以便只有整数可以回显到数字字段中。现在我只在输入小数时收到错误，这没关系。

【问题讨论】：

maxlength 不适用于数字输入。

标签： html forms validation input

【解决方案1】：

在使用type="number" 时，您需要将step="any" 作为属性

<form>
  <input step="any" type="number" name="width" maxlength="5" placeholder="Width" value="733.95591182365" />
</form>

【讨论】：

我已将您的答案标记为正确，因为这也可以，但我通过在回显之前将宽度四舍五入为整数解决了这个问题。
那个 step="any" 应该是 type="number" 的默认值。谢谢！

【解决方案2】：

对于number inputs，

step scale factor 是 1。default step 是 1

那么，由于没有step属性，allowed value step就是1×1 = 1：

如果该属性不存在，则allowed value step 是 default step 乘以 step scale factor。

而step base 将是733.95591182365：

如果元素具有value 内容属性，并且将algorithm to convert a string to a number 应用于 value content 属性的值不是错误，那么返回该结果并中止这些步骤。

因此，

约束验证：当元素有一个allowed value step，并且将algorithm to convert a string to a number应用到元素给出的字符串的结果 value 是一个数字，从step base 中减去的那个数字不是allowed value step 的整数倍，元素是suffering from a step mismatch。

由于733.95591182365 - 500 = 233.95591182365 不是1 的倍数，因此违反了该约束。

如果您想要另一个步骤，请指定step 属性。如果您不想执行任何步骤，请使用step = "any"。

【讨论】：