jquery - 如何使用 jQuery 在 HTML 输入框中只允许数字(0-9)？

Question

我正在创建一个网页，其中有一个输入文本字段，我希望在其中只允许数字字符，例如 (0,1,2,3,4,5...9) 0-9。

如何使用 jQuery 做到这一点？

Answer 1

^{注意:这是一个更新的答案。下面的评论指的是一个旧版本，它弄乱了键码。}

jQuery

自己试试on JSFiddle .

没有原生的 jQuery 实现，但是您可以过滤文本的输入值 <input>与以下 inputFilter插件(支持复制+粘贴、拖放、键盘快捷键、上下文菜单操作、不可键入的键、插入符号位置、不同的键盘布局、有效性错误消息和all browsers since IE 9):

// Restricts input for the set of matched elements to the given inputFilter function.
(function($) {
  $.fn.inputFilter = function(callback, errMsg) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop focusout", function(e) {
      if (callback(this.value)) {
        // Accepted value
        if (["keydown","mousedown","focusout"].indexOf(e.type) >= 0){
          $(this).removeClass("input-error");
          this.setCustomValidity("");
        }
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        // Rejected value - restore the previous one
        $(this).addClass("input-error");
        this.setCustomValidity(errMsg);
        this.reportValidity();
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        // Rejected value - nothing to restore
        this.value = "";
      }
    });
  };
}(jQuery));

您现在可以使用 inputFilter安装输入过滤器的插件:

$(document).ready(function() {
  $("#myTextBox").inputFilter(function(value) {
    return /^\d*$/.test(value);    // Allow digits only, using a RegExp
  },"Only digits allowed");
});

将您喜欢的样式应用于输入错误类。这是一个建议:

.input-error{
  outline: 1px solid red;
}

见 JSFiddle demo更多输入过滤器示例。另请注意，您仍然必须进行服务器端验证!

纯 JavaScript(无 jQuery)

实际上并不需要 jQuery，你也可以用纯 JavaScript 做同样的事情。见 this answer .

HTML 5

HTML 5 有一个原生解决方案 <input type="number"> (参见 specification )，但请注意浏览器支持各不相同:

• 大多数浏览器只会在提交表单时验证输入，而不是在输入时验证。
• Most mobile browsers不支持step , min和 max属性。
• Chrome(版本 71.0.3578.98)仍允许用户输入字符 e和 E进入领域。另见 this question .
• Firefox(64.0 版)和 Edge(EdgeHTML 17.17134 版)仍允许用户在字段中输入任何文本。

自己试试on w3schools.com .