首页 文章

Chrome / HTML5：输入类型编号不符合最大属性？

提问于
浏览 次
23

我有以下标记：

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

在谷歌浏览器（和其他可能的WebKit浏览器），这将限制微调的向上箭头不过去99，但它 does not 防止用户键入数字高于99连的onblur，无效值不会被删除/更换，甚至给出该值无效的警告 .

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

Edit:

为了澄清，我想知道为什么首先允许输入大于指定最大值的数字 . 我认识到，它给出了表单提交一个提示，告诉你，这是无效的，但它似乎是不一致的行为的微调不会让你去最大上面，但你可以简单地在任何时间类型的最高上面一个数字来规避它 .

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

html forms html5 google-chrome

2 回答

  • 1

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

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

    jsFiddle

    回复于
  • 8

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

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

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

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

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

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

    回复于

相关问题