Question

我有以下标记：

<input type="number" max="99" />

在谷歌浏览器（以及可能的其他webkit浏览器）中，这将限制微调器的向上箭头超过99，但不阻止用户键入高于99的数字。甚至onblur ，如果该值无效，则不会删除/替换无效值，甚至是警告。

我是否误解了它应该如何工作，或者这是一个错误？我使用的是最新版本的Chrome（撰写本文时为19）。

修改

为了澄清，我想知道为什么首先允许输入大于指定最大值的数字。我意识到它提供了表单提交的工具提示，告诉你它无效，但似乎不一致的行为，微调器不允许你超过最大值，但你可以随时键入一个高于最大值的数字来规避它

如果由于某种原因这是期望的行为，那为什么呢？是否有更好的选择来强制输入范围而不诉诸JS？

Answer 1

它确实有效，但如果您在代码中放入提交按钮和表单，则只会看到错误消息（工具提示）：

<form action="#" method="get">
  <input type="number" max="99" />
  <input type="submit" value="Submit!" />
</form>

Answer 2

这是一个老问题，但我在任何地方都没有找到任何相关答案。这种行为仍然存在于chrome（版本61）中。

我找到了一个可以在某些情况下使用的小技巧。它与那些使用aurelia，angular等数据绑定库的人相关。我只在aurelia上测试过 - 但这也适用于其他人。

该技巧依赖于range类型的输入强制实施min / max约束的事实。

我们只是创建另一个输入（类型为range），该输入与常规输入的值相同，我们通过css隐藏它。

当用户输入大于max值的内容时，它会快速恢复为max值。