25

我有以下标记：

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

在 Google Chrome（以及可能的其他 webkit 浏览器）中，这将限制微调器的向上箭头超过 99，但它不会阻止用户输入高于 99 的数字。即使 onblur，也不会删除/替换无效值或鉴于该值无效，甚至会发出警告。

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

编辑：

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

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

4

2 回答 2

9

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

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

jsFiddle ​</p>

于 2012-05-25T16:13:55.353 回答
2

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

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

range诀窍依赖于输入类型强制执行min/max约束的事实。

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

当用户输入大于该max值的内容时，它会迅速回到该max值。

这是 aurelia 的演示：https ://gist.run/?id=86fc278d3837718be4691acd5625aaad

于 2017-10-16T19:06:36.357 回答