Javascript Regex 将文本字段限制为仅数字（必须允许不可打印的键）

Question

我从以前的开发人员那里收到了 PHP/JS 代码，我需要向手机号码字段添加号码验证。 我已经有了 HTML 验证，但我需要补充一点，如果有人按下无效键，它不会显示出来，只是为了稍后以红色突出显示该字段，因为它包含无效输入。

我已经看到许多正则表达式的使用和尝试，但它们对我所需要的有一个/或一个效果：如果输入了一个字母或特殊字符，不接受也不显示，所有其他输入（数字，键）被接受（我需要根本不显示无效字符，不显示然后删除）。 现在最有效的正则表达式是这样的：

function filterNonDigits(evt)
{
  var event = evt || window.event;
  var keyentered = event.keyCode || event.which;
  keyentered = String.fromCharCode(keyentered);

  //var regex1 = /[0-9]|\./;
  var regex2 = /^[a-zA-Z.,;:|\\\/~!@#$%^&*_-{}\[\]()`"'<>?\s]+$/;

  if( regex2.test(keyentered) ) {
    event.returnValue = false;
    if(event.preventDefault) event.preventDefault();
  }

当我使用注释的 regex1（与 IF 条件相反）时，它自然地将输入限制为仅数字，从而阻止所有键，例如 Delete、BackSpace 等。使用 regex2 时，我仍然无法按 Delete 或数字键盘中的数字.

所以我的问题是，上面的代码可以修改为只接受数字但也允许密钥吗？ 另一个重要的一点是，我需要一种不使用这些键的键码（8、24 等）的方法，以确保可以使用所有键盘类型。

---

新更新：

所以我的解决方案如下：如果“oninput”属性存在，我使用 Ehtesham 提供的解决方案，如果不存在，备份使用 Rohan Kumar 提供的解决方案。 所以它是这样的：

if (obj.hasOwnProperty('oninput') || ('oninput' in obj)) 
{
    $('#mobileno').on('input', function (event) { 
        this.value = this.value.replace(/[^0-9]/g, '');
    });
} 
else 
{
    $('#mobileno').on('keypress',function(e){
        var deleteCode = 8;  var backspaceCode = 46;
        var key = e.which;
        if ((key>=48 && key<=57) || key === deleteCode || key === backspaceCode || (key>=37 &&  key<=40) || key===0)    
        {    
            character = String.fromCharCode(key);
            if( character != '.' && character != '%' && character != '&' && character != '(' && character != '\'' ) 
            { 
                return true; 
            }
            else { return false; }
         }
         else   { return false; }
    });
}

谢谢。

Answer 1

这里最好的方法是使用input事件来处理您的所有问题。 所有现代浏览器都支持它。 使用 jQuery，您可以执行以下操作。 处理使用鼠标/键盘退格键等粘贴值的所有情况。

$('.numeric').on('input', function (event) { 
    this.value = this.value.replace(/[^0-9]/g, '');
});

看这里

您可以通过检查输入是否具有此属性来检查是否支持input事件，如果没有，您可以对旧浏览器使用onkeyup 。

if (inputElement.hasOwnProperty('oninput')) {
    // bind input
} else {
    // bind onkeyup
}

Answer 2

一个很好的解决方案在描述以前的帖子：

jQuery('.numbersOnly').keyup(function () { 
    this.value = this.value.replace(/[^0-9\.]/g,'');
});

Answer 3

试试看，

CSS

.error{border:1px solid #F00;}

脚本

$('#key').on('keydown',function(e){
    var deleteKeyCode = 8;
    var backspaceKeyCode = 46;
    if ((e.which>=48 && e.which<=57) ||
         (e.which>=96 && e.which<=105)  || // for num pad numeric keys
         e.which === deleteKeyCode || // for delete key,
             e.which === backspaceKeyCode) // for backspace
         // you can add code for left,right arrow keys
    {
        $(this).removeClass('error');
        return true;
    }
    else
    {
        $(this).addClass('error');
        return false;
    }
});

小提琴： http : //jsfiddle.net/PueS2/

Answer 4

与其检查事件 keyCode，不如只检查实际输入中的更改，然后过滤掉非数字？

此示例使用 keyup 以便它可以读取实际输入的内容，这意味着该字符会被短暂显示然后被删除，但希望您能理解我的要点。 它甚至可能会向用户反馈不允许使用该字符。 无论哪种方式，我都认为这是最简单的设置，如果您需要更多帮助来充实它，请告诉我。

function filterNonDigits(evt)
{
  var event = evt || window.event;
  var val = event.target.value;
  var filtered = val.replace(/[^0-9]/g, '');

    if(filtered !== val) {
      event.target.value = filtered;
      event.target.className += " error";
    }
}

http://jsfiddle.net/mEvSV/1/

（jquery 仅用于轻松绑定 keyup 函数，您的实际脚本不需要它）

Answer 5

/\\d/相当于上面描述的/[0-9]/ 。 源代码： https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#special-digit

Answer 6

这个比较简洁...

this.value = this.value.replace(/\D/gm, '');