Jquery 允许字母数字字符和非文本按键答案

【问题标题】：Jquery to allow alphanumeric characters and non-text key pressesJquery 允许字母数字字符和非文本按键
【发布时间】：2014-01-22 10:37:09
【问题描述】：

我有一个文本框，用户只能在其中输入字母数字字符，并且应该允许非文本按键，如退格键、箭头键等。此外，它还应该适用于所有主流浏览器（如 Mozilla Firefox）。

我尝试了一些示例，这些示例只允许我输入字母数字字符，但退格键不适用于 Mozilla Firefox 中的以下示例。

$('input').bind('keypress', function (event) {
    var regex = new RegExp("^[a-zA-Z0-9]+$");
    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
    if (!regex.test(key)) {
       event.preventDefault();
       return false;
    }
});

【问题讨论】：

请注意，您需要对更改或模糊执行类似的验证，因为用户可能会在不使用键盘的情况下修改字段值。

标签： javascript jquery regex

【解决方案1】：

您可以添加[\b] 以匹配并允许退格。

代码：

var regex = new RegExp("^[a-zA-Z0-9\b]+$");

演示：http://jsfiddle.net/M3bvN/

更新

您可以检查按下的键是否在允许的键（箭头、home、del、canc）列表中，而不是扩展您的正则表达式，如果是则跳过验证。

这不会阻止用户复制/粘贴不允许的字符。所以也要在blur 事件中执行验证控制（并且总是在服务器端）。

代码：

var keyCode = event.keyCode || event.which
// Don't validate the input if below arrow, delete and backspace keys were pressed 
if (keyCode == 8 || (keyCode >= 35 && keyCode <= 40)) { // Left / Up / Right / Down Arrow, Backspace, Delete keys
    return;
}

演示：http://jsfiddle.net/M3bvN/3/

【讨论】：

方向键、Home、End、Del 等呢？（用你的小提琴，它们似乎可以在 Chrome 中工作，但不能在 FF 中工作。）
@nnnnnn "nice" 我去看看
@IrvinDomininakaEdward，退格有效，但我想启用所有非文本按键，如（删除、空格等）与退格..
在 linux 上的 chrome 上按 alt+tab 时通过 ;)

【解决方案2】：

我在这方面做了一段时间，这就是我想出的：

var input = $('input[name="whatever"]');

input.bind('keypress', function(e)
{
    if ((e.which < 65 || e.which > 122) && (e.which < 48 || e.which > 57))
    {
        e.preventDefault();
    }
});

它只允许大写和小写的数字和字母。请注意，它也不允许使用空格键（这是我的应用程序所需要的）。

【讨论】：

这不包括方括号和“勾号”`字符

【解决方案3】：

function lettersOnly(evt) {
    evt = (evt) ? evt : event;
    var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode :
        ((evt.which) ? evt.which : 0));
    if (charCode == 8 || charCode == 46 || charCode == 37 || charCode == 39) {
        return true;
    } else if (charCode > 31 && (charCode < 65 || charCode > 90) && (charCode < 97 || charCode > 122)) {
        // alert("Enter letters only.");
        return false;
    }
    return true;
}

【讨论】：

【解决方案4】：

$('.alphanumeric').bind('keypress', function (e) {
        var specialKeys = new Array();
        specialKeys.push(8); //Backspace
        specialKeys.push(9); //Tab
        specialKeys.push(46); //Delete
        specialKeys.push(36); //Home
        specialKeys.push(35); //End
        specialKeys.push(37); //Left
        specialKeys.push(39); //Right
        var keyCode = e.keyCode == 0 ? e.charCode : e.keyCode;
        var ret = ((keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122) || (specialKeys.indexOf(e.keyCode) != -1 && e.charCode != e.keyCode));
        return ret;
    });

此代码也适用于 Firefox

【讨论】：