使用JavaScript检查文本输入模式是否有效

Question

理想的效果是，当用户键入不是字母或数字的任何字符时，该字符将被立即删除； 因此导致文本光标不前进。

在已经尝试过自己在线查找解决方案之后，到目前为止，这里是：

<input type="text" id="job-name" maxlength="20" pattern="[a-zA-Z0-9]+" style="width:200px; text-align:center;">

document.getElementById('job-name').addEventListener('keydown', function () {
            if (!document.getElementById('job-name').validity.valid) {
                var text = document.getElementById('job-name').value;
                text = text.slice(0,-1);
                document.getElementById('job-name').value = text;
            }
        });

问题在于，出于某种原因，无论键入的是什么字符，对“ valid”属性的检查到目前为止始终为true且从不为false。 我的期望是，只要输入的字符不符合该模式，“ valid”应返回false。 否则，这是真的。

Answer 1

使用事件input来完成此任务：

这种方法使用正则表达式/[^a-z0-9]+/i 。

基本上，对于每个输入的字符/文本，句柄都将无效字符替换为空。

 document.getElementById('job-name').addEventListener('input', function(e) { this.value = this.value.replace(/[^a-z0-9]+/i, ''); }) 

 <input type="text" placeholder='Paste text, drag text or type text' id="job-name" maxlength="20" style="width:400px; text-align:center;"> 

Answer 2

尝试使用input事件而不是keydown 。

document.getElementById('job-name').addEventListener('input', function () {
    if (!document.getElementById('job-name').validity.valid) {
        var text = document.getElementById('job-name').value;
        text = text.slice(0,-1);
        document.getElementById('job-name').value = text;
    }
});