期望的效果是当用户输入任何不是字母或数字的字符时，该字符立即被删除；从而导致文本光标不前进。
在自己尝试在线寻找解决方案之后，这是我目前所拥有的：
<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；否则，这是真的。
尝试使用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;
}
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句