jQuery 的

^{注意：这是一个更新的答案。下面的评论是指使用密钥代码搞乱的旧版本。}

下面脚本中的inputFilter插件允许您在文本<input>上使用任何类型的输入过滤器，包括各种数字过滤器。这将正确处理自 IE 9 以来的复制 + 粘贴，拖放，键盘快捷键，上下文菜单操作，不可键入的键，光标位置，所有键盘布局和所有浏览器。 请注意，您仍然必须进行服务器端验证！

在 JSFiddle 上自己尝试一下。

// Restricts input for each element in the set of matched elements to the given inputFilter.
(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);
      }
    });
  };
}(jQuery));

用法：

// Restrict input to digits by using a regular expression filter.
$("#myTextBox").inputFilter(function(value) {
  return /^\d*$/.test(value);
});

您可能想要使用的一些输入过滤器：

整数值（正面和负面）：
/^-?\d*$/.test(value)
整数值（仅限正数）：
/^\d*$/.test(value)
整数值（正数且达到特定限制）：
/^\d*$/.test(value) && (value === "" || parseInt(value) <= 500)
浮点值（允许.和,作为小数分隔符）：
/^-?\d*[.,]?\d*$/.test(value)
货币值（即最多两位小数）：
/^-?\d*[.,]?\d{0,2}$/.test(value)
十六进制值：
/^[0-9a-f]*$/i.test(value)

纯 JavaScript

实际上并不需要 jQuery，你也可以用纯 JavaScript 做同样的事情。请参阅此答案或在 JSFiddle 上自行尝试。

HTML 5

HTML 5 具有<input type="number">的本机解决方案（请参阅规范），但请注意浏览器支持各不相同：

大多数浏览器仅在提交表单时验证输入，而不是在输入时验证。
大多数移动浏览器不支持step ， min和max属性。
Chrome（版本 71.0.3578.98）仍允许用户在字段中输入字符e和E另见这个问题。
Firefox（版本 64.0）和 Edge（EdgeHTML 版本 17.17134）仍然允许用户在该字段中输入任何文本。

在 w3schools.com 上亲自尝试一下。

更复杂的验证选项

如果你想做一些其他验证的点点滴滴，这可能很方便：

这是我使用的功能：

// Numeric only control handler
jQuery.fn.ForceNumericOnly =
function()
{
    return this.each(function()
    {
        $(this).keydown(function(e)
        {
            var key = e.charCode || e.keyCode || 0;
            // allow backspace, tab, delete, enter, arrows, numbers and keypad numbers ONLY
            // home, end, period, and numpad decimal
            return (
                key == 8 || 
                key == 9 ||
                key == 13 ||
                key == 46 ||
                key == 110 ||
                key == 190 ||
                (key >= 35 && key <= 40) ||
                (key >= 48 && key <= 57) ||
                (key >= 96 && key <= 105));
        });
    });
};

然后，您可以执行以下操作将其附加到您的控件：

$("#yourTextBoxName").ForceNumericOnly();

排队：

<input name="number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">

不引人注目的风格（使用 jQuery）：

$('input[name="number"]').keyup(function(e)
                                {
  if (/\D/g.test(this.value))
  {
    // Filter non-digits from input value.
    this.value = this.value.replace(/\D/g, '');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="number">

协慌网

如何使用 jQuery 仅允许 HTML 输入框中的数字（0-9）？

答案

jQuery 的

纯 JavaScript

HTML 5

更复杂的验证选项