如何防止在文本字段中输入非数字？答案

【问题标题】：How can I prevent entry of non-numerals a text field?如何防止在文本字段中输入非数字？
【发布时间】：2011-02-20 01:07:44
【问题描述】：

我找到了this question。但是，大多数答案会拦截按键，检查键码，如果它不是可接受的键码，则停止事件。

这有一些问题。

所有答案中的一个常见错误是不会阻止 shift 键组合，因此用户可以输入诸如“@”或“&”之类的内容。
用户仍然可以从剪贴板粘贴错误值。
当您开始处理按键事件时，网页开始做一些奇怪的、意想不到的事情。例如，如果该字段具有焦点并且用户尝试通过按command-R 重新加载页面，则它将不起作用。或者他们无法离开现场。

我想要一个允许按键的解决方案，然后根据正则表达式检查输入的值并删除不需要的字符。

我正在寻找以下方面的解决方案：

不拦截按键事件。
理想情况下在按键后使用正则表达式。
如果它使用 jQuery，则可以。
不需要安装插件。

我试过这个功能：

  $('input.numerals_only').keypress(function() {
    var v = $(this).val();
    var no_nonnumerals = v.replace( /[^0-9]/, '' );
    $(this).val(no_nonnumerals);
  });

但这不起作用。我仍然可以输入字母。

关于为什么它不起作用的任何信息？我该如何修改它以使其正常工作？其他建议？

【问题讨论】：

标签： javascript jquery regex validation

【解决方案1】：

如果您使用 keyup 并且还进行模糊处理，则应该处理大多数情况。有人键入文本，以及他们是否将值粘贴到文本框中。因为模糊功能也会删除坏值。

$('input.numerals_only').keyup(AllowOnlyNumber).blur(AllowOnlyNumber);

function AllowOnlyNumber()
{
    var v = $(this).val();
    var no_nonnumerals = v.replace(/[^0-9]/g, '');
    $(this).val(no_nonnumerals); 
}

当然，如果 html5 是一个选项，你总是可以这样做：

<input type="number"/>

jsfiddle 示例。

【讨论】：

+1。不是也有 onpaste 事件吗？我可能在想别的……
你也可以bind('paste', AllowOnlyNumber) 活动。但是我不确定每个浏览器对它的支持程度。
看起来大部分都支持...quirksmode.org/dom/events/cutcopypaste.html

【解决方案2】：

您的正则表达式缺少的东西是用于全局正则表达式检查的g 标志，这就是它对按键也不起作用的原因。

使用var no_nonnumerals = v.replace( /[^0-9]/g, '' );

【讨论】：

只有焦点离开文本框时才会触发onchange事件。

【解决方案3】：

如果您使用keyup 而不是keypress，它将始终删除不正确的字符。

您也可以使用它来实际阻止事件：

$('input.numerals_only').keypress(function(event) {
    if(event.keyCode < 48 || event.keyCode > 57){
        return false;
    }
});

【讨论】：

【解决方案4】：

使用keyup 事件。浏览器处理key后触发：

$('#txtInput')
    .keyup(function(ev) {
        var newValue = this.value.replace(/[^0-9]/, '');
        $(this).val(newValue);
    });

【讨论】：

【解决方案5】：

我为此编写了一个 jQuery 插件。演示和代码在这里http://brianjaeger.com/process.php

它使用正则表达式来验证您想要的任何内容。

有几个问题：

它是一个插件（但是，如果需要，您可以提取代码并将其插入到您的其他 JavaScript 中。-它更容易用作插件）
很遗憾，无法直接限制粘贴的信息（跨所有浏览器） - 我的解决方案是添加对焦点更改和按键的验证。

【讨论】：