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

时间:2018-03-25 02:59:56

标签: javascript html5

期望的效果是,当用户键入任何不是字母或数字的字符时,该字符立即被删除;从而导致文本光标不前进。

在我自己尝试在线寻找解决方案之后,到目前为止我的目标是:

<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'属性都是真的并且永远不会是假的。我的期望是,只要输入的字符不符合模式,'valid'应该返回false;不然,这是真的。

2 个答案:

答案 0 :(得分:1)

使用事件input来实现:

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

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

&#13;
&#13;
document.getElementById('job-name').addEventListener('input', function(e) {
  this.value = this.value.replace(/[^a-z0-9]+/i, '');
})
&#13;
<input type="text" placeholder='Paste text, drag text or type text' id="job-name" maxlength="20" style="width:400px; text-align:center;">
&#13;
&#13;
&#13;

答案 1 :(得分:0)

尝试使用input event代替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;
    }
});