限制用户将值放在 html 输入的范围内（类型 = 数字）

Question

如何阻止用户在 html 输入中添加大于最大值且小于最小值的数字（类型 = 数字）

<input id="ageRange" type="number" min=20 max= 50 maxlength=2></input>

我尝试了一个 javascript 代码，但是在我们添加值后它会发生变化，然后它会改变值。有什么方法可以阻止用户将值放入范围内，或者在我们以编程方式更改值时输入单元格中没有闪烁？

Answer 1

您需要在低级别处理输入并执行自己的检查。为了防止用户输入大于最大值的值，您可以处理该keypress事件，然后检查输入的字符以及它是否会使值过大：

<input id="ageRange" type="number" min=20 max= 50 maxlength=2>
<script>
document.getElementById('ageRange').onkeypress =
  function (e) {
    var ev = e || window.event;
    if(ev.charCode < 48 || ev.charCode > 57) {
      return false; // not a digit
    } else if(this.value * 10 + ev.charCode - 48 > this.max) {
       return false;
    } else {
       return true;
    }
  }
</script>

这确实可以防止用户通过粘贴插入更大的值。

为了防止用户删除字符使值变得太小，您需要处理 rubout 键，由于键盘差异，这更成问题。但它的可用性会很差。假设用户输入 30，然后意识到他想输入 40。防止将值更改为太小的代码将防止删除任一数字！

浏览器应该有自己的用户界面<input type=number>，这就是使用它的原因。该界面并不是为了防止用户输入太大的值，而是为了检测它们并报告它们，以便用户可以更正它们。在尝试对其进行实质性修改之前，请考虑潜在的混淆。如果您确实添加了防止超出范围值的代码，浏览器将不会显示诊断消息（例如“数字必须小于或等于 50”），因为它们默认情况下支持<input type=number>，因此您的 JavaScript 代码可能应该发出自己的诊断。