只允许输入英文字母和数字的文本输入。

Question

只允许输入英文字母和数字的文本输入。

javascriptjqueryinputvalidationalphanumeric

18

实时演示：http://jsfiddle.net/thisizmonster/DveuB/

如何更改输入框只允许输入 A-Z、a-z、0-9 字符，且不使用正则表达式？

- Gereltod

你想要的方法叫做 keypress，而不是 keyPress。 - ThiefMaster

1

为什么不用正则表达式呢？使用正则表达式会非常容易！ - Sam Martin

你仍然需要为控制字符添加一个特殊情况。 - ThiefMaster

因为我不懂正则表达式！你能帮我做吗？ - Gereltod

相关链接: https://dev59.com/DHNA5IYBdhLWcg3wmfO5 - pyvi

2

在打字时，鼠标复制粘贴或其他非键盘输入方式可以使用吗？ - pyvi

7个回答

10

<input type="text" id="firstName"  onkeypress="return (event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode >= 48 && event.charCode <= 57)" />

ASCII字符集：https://www.w3schools.com/charsets/ref_html_ascii.asp

- Siya Matsakarn

1

请注意，这并不能阻止用户将不需要的字符复制粘贴到输入字段中。 - Pang

你可以将"onkeypress"更改为"onblur"。 - Siya Matsakarn

7

其他所有答案都可以，但不能防止复制粘贴非英文字符。

以下代码适用于键盘按下和复制粘贴：

<input type="text" name="text" oninput="this.value=this.value.replace(/[^A-Za-z\s]/g,'');">

- mohammad asghari

我希望我能理解正则表达式，说实话，我希望正则表达式被取代，用更容易创建的东西来替代它。哦伟大的正则表达式大师，我该如何在这个表达式中添加0-9？ - Eric Weintraub

@EricWeintraub，你可以使用这个 /[^0-9A-Za-z\s]/g。 - mohammad asghari

2

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {

  $('.clsAlphaNoOnly').keypress(function (e) {  // Accept only alpha numerics, no special characters 
        var regex = new RegExp("^[a-zA-Z0-9 ]+$");
        var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (regex.test(str)) {
            return true;
        }

        e.preventDefault();
        return false;
    }); 
})
</script>

<body>

<input class='clsAlphaNoOnly' type='text'>
</body>
</html>

- SajithG

2

您可以像这样做：http://jsfiddle.net/DveuB/1/ 然后只有0-9，a-z和A-Z。

$(function(){
    $("#user").keypress(function(event){
        if ((event.charCode >= 48 && event.charCode <= 57) || // 0-9
            (event.charCode >= 65 && event.charCode <= 90) || // A-Z
            (event.charCode >= 97 && event.charCode <= 122))  // a-z
            alert("0-9, a-z or A-Z");
    });
});

更新： http://jsfiddle.net/DveuB/4/
为了防止@mu所说的问题：

$("#user").keyup(function(event){
    if (event.altKey == false && event.ctrlKey == false)
        if ((event.keyCode >= 48 && event.keyCode <= 57 && event.shiftKey== false) ||
            (event.keyCode >= 65 && event.keyCode <= 90) ||
            (event.keyCode >= 97 && event.keyCode <= 122))
            alert("0-9, a-z or A-Z");
});

- 321X

我可以在OSX的Safari和Firefox中获取一个组合字符（例如由alt-e-e构建的é），但这些字符似乎不会触发keypress事件。 - mu is too short

如果(event.keyCode == 8) return true; - peiman F.

答案错过了。你应该测试重复的“点”（.），你可以输入多个。 - Nuri YILMAZ

1

我将使用以下函数：

通过修改RegExp，您可以摆脱任何您个人不喜欢的字符。

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

- vovchisko

0

你可能需要编写一些if语句或类似的代码，将按键码与表示其他按键码的数字进行验证：

例如： if(keycode < 80) return false;

- Bas Slagter

1

这段代码将防止您使用退格键。您需要处理控制字符并始终允许它们。 - ThiefMaster

这只是一个例子。当然，您需要确定要允许哪些代码（如退格、箭头等），以及要忽略哪些代码。 - Bas Slagter

这与321X在OSX上的问题相同。 - mu is too short

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul · Accepted Answer

假设您也想接受空格：

$("#user").keypress(function(event){
    var ew = event.which;
    if(ew == 32)
        return true;
    if(48 <= ew && ew <= 57)
        return true;
    if(65 <= ew && ew <= 90)
        return true;
    if(97 <= ew && ew <= 122)
        return true;
    return false;
});

如果您不想接受空格，请删除if(ew == 32) return true; JSFiddle