期望的效果是,当用户输入任何非字母或数字的字符时,该字符立即被删除;从而导致文本光标不前进。
在自己尝试在线寻找解决方案之后,到目前为止,我得到的是:
<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;
}
});
问题在于,由于某种原因,无论输入的字符如何,“有效”属性的检查到目前为止始终为 true 而绝不会为 false。我的期望是,每当刚刚输入的字符不符合模式时,“valid”应该返回 false;否则,这是真的。
最佳答案
使用事件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;">
关于javascript - 使用 JavaScript 检查文本输入模式是否有效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49472115/