如何使用 jQuery 在 HTML 输入框中只允许数字(0-9)? [英] How to allow only numeric (0-9) in HTML inputbox using jQuery?

问题描述

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

I am creating a web page where I have an input text field in which I want to allow only numeric characters like (0,1,2,3,4,5...9) 0-9.

如何使用 jQuery 做到这一点?

How can I do this using jQuery?

推荐答案

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

^{Note: This is an updated answer. Comments below refer to an old version which messed around with keycodes.}

自己尝试在JSFiddle上.

没有本机 jQuery 实现，但您可以使用以下 inputFilter 插件过滤文本 <input> 的输入值(支持 Copy+Paste、拖放、键盘快捷键、上下文菜单操作、不可键入的键、插入符号位置、不同的键盘布局和 自 IE 9 以来的所有浏览器):

There is no native jQuery implementation for this, but you can filter the input values of a text <input> with the following inputFilter plugin (supports Copy+Paste, Drag+Drop, keyboard shortcuts, context menu operations, non-typeable keys, the caret position, different keyboard layouts, and all browsers since IE 9):

// Restricts input for the set of matched elements to the given inputFilter function.
(function($) {
  $.fn.inputFilter = function(inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  };
}(jQuery));

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

You can now use the inputFilter plugin to install an input filter:

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

有关更多输入过滤器示例，请参阅 JSFiddle 演示.另请注意，您仍然必须进行服务器端验证！

See the JSFiddle demo for more input filter examples. Also note that you still must do server side validation!

实际上并不需要 jQuery，你也可以用纯 JavaScript 做同样的事情.请参阅此答案.

jQuery isn't actually needed for this, you can do the same thing with pure JavaScript as well. See this answer.

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

HTML 5 has a native solution with <input type="number"> (see the specification), but note that browser support varies:

• 大多数浏览器只会在提交表单时验证输入，而不是在输入时验证.
• 大部分手机浏览器不支持step，min 和 max 属性.
• Chrome(版本 71.0.3578.98)仍然允许用户在字段中输入字符 e 和 E.另请参阅这个问题.
• Firefox(64.0 版)和 Edge(EdgeHTML 17.17134 版)仍允许用户在字段中输入任何文本.

• Most browsers will only validate the input when submitting the form, and not when typing.
• Most mobile browsers don't support the step, min and max attributes.
• Chrome (version 71.0.3578.98) still allows the user to enter the characters e and E into the field. Also see this question.
• Firefox (version 64.0) and Edge (EdgeHTML version 17.17134) still allow the user to enter any text into the field.

在 w3schools.com 上亲自尝试.

Try it yourself on w3schools.com.

这篇关于如何使用 jQuery 在 HTML 输入框中只允许数字(0-9)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！