Javascript 正则表达式将文本字段限制为仅数字（必须允许不可打印的键）

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, '');
});

看here

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

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

Answer 2

previous post 中描述了一个不错的解决方案：

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, '');