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

Posted 2023-05-09

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

【英文标题】：Javascript Regex to limit Text Field to only Numbers (Must allow non-printable keys)

【发布时间】：2013-10-06 06:03:57

【问题描述】：

我从以前的开发者那里收到了 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; 
    );

谢谢。

【问题讨论】：

所以我在 IE9 上运行了这个，看起来不错。如果我通过 Browser/DocumentMode 模拟 IE8，尽管它失败了......就像 $('#mobileno').get(0).hasOwnProperty('oninput') 返回一个 javascript 错误“对象不支持属性或方法'hasOwnProperty' ”。无论如何要在 IE7/8 上进行检查？

【参考方案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

【讨论】：

感谢您的回复，这实际上看起来很有希望满足我的需求。我将如何获得“inputElement”？ “document.getElementById”会起作用吗？ Edit1： 我试过了，它在 FF24.0 和 IE10 中返回 False。这是正常的行为吗？ Edit2: 我认为添加 (hasOwnProperty || 'property' in inputElement) 对于不支持 hasOwnProperty 的浏览器来说可能是个好主意。这行得通吗？

好的，非常感谢，到目前为止这似乎工作得很好。一个小问题，如果我将光标放在字段值的中间并且按下无效字符，则光标会移动到字段的末尾。当我尝试删除中间的字符时，Chrome 也会发生这种情况。有什么办法可以解决吗？还是正常的？

@Ehtesham，我尝试了您的代码，但存在关于移动浏览器使用的错误。你能帮我解决吗？问题：after typing numbers, if i press spacebar it erases the typed number!。如何解决这个问题？

【参考方案2】：

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

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

【讨论】：

正则表达式包含一个\.，OP 在禁止正则表达式中明确列出。此外，如果原始帖子在问题或标签中不包含 jQuery，通常我不会推荐 jQuery 解决方案。

感谢两位的回复。我实际上已经尝试过这种方法，但被要求找到一种不显示字母的方法，然后将其删除，这让我寻找其他方法。 jQuery 也可以，但我没有包含它，因为我的问题更多是关于要使用的 JS 函数。

啊，这需要不同的方法。你能把它添加到你原来的问题中吗？它可能会阻止人们添加更多不符合您需求的答案。

感谢您的提示。我实际上以为我已经提到我不希望显示无效字母，但我可以看到它可以被认为是可以的，如果它显示然后被删除。我现在将对其进行编辑。

【参考方案3】：

试试看，

CSS

.errorborder: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/

【讨论】：

感谢您的回复。我使用 keyCodes 的唯一问题是，如果有人使用非美国键盘，某些键可能有不同的 keyCodes。我正在研究 RegEx 以避免这个问题。

哦，如果是这样的话，看看这个：***.com/questions/10531977/…。只需使用 keypress 事件而不是 keyup/down

啊，没想到（这里是 JS 和 jQuery 的新手）。那么在 Rohan Kumar 提供的代码中将“keydown”替换为“keypress”就可以解决问题了吗？

我现在有另一个问题，即点、% 和 & 字符与退格键和 2 个箭头键（我允许）具有相同的代码，所以点、% 和 & 也被接受.. 还有一件事是在 Mozilla FF 中，我根本无法在该字段中输入。有什么想法吗？

好的，FF 问题已解决，我使用了“e.keyCode”而不是“e.which”，FireFox 似乎对此有问题。现在我只是遇到了与不可打印键具有相同代码的某些无效字符的问题。到目前为止我注意到的是 (%,&,.,') 知道如何解决这个问题吗？谢谢。

【参考方案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 函数，您的实际脚本不需要它）

【讨论】：

感谢您的回复。正如我在对上一个回复的评论中提到的，我已经尝试过这种方法，但我正在寻找另一种方法，正是因为“角色被短暂显示然后删除”的后果。

感谢您在我尝试提供的不同解决方案时遇到的不同问题提供的帮助 :)

【参考方案5】：

/\d/ 等价于上述/[0-9]/。源：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#special-digit

【参考方案6】：

这样更简洁一些...

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