HTML5 number min 属性不会阻止用户输入低于最小值？

Question

我意识到还有其他解决方案，但我正在尝试使用 HTML5 min 属性来防止用户在文本字段中输入 0。下面的标记提供了一个带有漂亮的向上/向下箭头的文本字段，用于选择数字；如果我按下向下箭头，该值将不会低于 1。但我仍然可以在该字段中手动输入 0。这是预期的行为吗？是否有一种 HTML5 技术可以防止输入小于特定最小值的数字？

<input type="number"  min="1" />

Answer 1

当您在输入类型数字上使用 min 属性时，您可以通过箭头限制用户低于最小值或高于最大值。但是，用户可以尝试直接输入无效值，但不会通过。您可以通过以下方式查看输入无效值时发生的情况:

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_max_min

如果您不喜欢这样，您可以随时使用这样的 javascript 方法:

<script>
  function validateNum(input) {
    if (input.value < 1) input.value = 1;
  }
</script>

<input type="number" onchange="validateNum(this);" />

不确定上面的代码是否有效，因为我只是简单地输入了一个而没有实际测试它，但是你应该能够理解我的目的。