如何使用javascript验证输入字段以仅限制数字并将范围设置为最大值和最小值

Question

On event change the overflow value must get rejected.

我的表单中有一个输入框，我想限制用户仅输入 0 到 99999 之间的数字。但我不想禁用选项卡按钮功能。以下代码适用于“仅限数字”，但也不允许使用 Tab 按钮。如果有人输入大于 99999 的数字，它也不会检查溢出条件。

   <script>
      function myIdFunction() {
        var txt = "";
        if (document.getElementById("EmpId").validity.rangeOverflow) {
        txt = "Value too large";
        }
      document.getElementById("demo").innerHTML = txt;

      }
  </script>

  <input type="text" name="id" id="EmpId" ng-model="EmpId" max="99999"
   onchange="myIdFunction()" onkeypress="return IsNumeric(event);" 
   ondrop="return false;" onpaste="return false;" ng-disabled="!edit"    
   placeholder="EmpId" required>

   <span id="error" style="color: Red; display: none">* Input digits (0 -)</span>
   <script type="text/javascript">
    var specialKeys = new Array();
    specialKeys.push(8); //Backspace
    function IsNumeric(e) {
        var keyCode = e.which ? e.which : e.keyCode
        var ret = ((keyCode >= 48 && keyCode <= 57) ||
            specialKeys.indexOf(keyCode) != -1);
        document.getElementById("error").style.display = ret ? "none" : "inline";
        return ret;
    }
  </script>

Answer 1

<input type=number min=0 max=99999>

提供给您：

规格见：

• WHATWG HTML, section 4.10.5.1.13

支持的浏览器见：

• Can I use: Number input type
• The Current State of HTML5 Forms: The min, max, and step Attributes

对于较旧的浏览器，请使用：

• number-polyfill

（用于在当前不支持的浏览器中实现 HTML5 <input type=number> 元素的 polyfill。）

实时执行正确值

如果您不希望用户在输入时输入错误的值：

var last = '';
input.addEventListener('input', function () {
  if (this.checkValidity()) {
    last = this.value;
  } else {
    this.value = last;
  }
});

请参阅：DEMO。