输入4个字母和4个数字没有特殊字符只限制但允许功能键？

Question

我想将我的文本输入限制为只有 4 个字母，然后是 4 个数字，没有特殊字符，也没有白色 space。

我写的代码：

inputText.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
        if (!inputText.checkValidity()) {
            alert('Pattern not matched!!')
            return;
        }
    }
    let pos = e.target.selectionStart;
    pos < 4 ? /^[A-Z]$/.test(e.key) ? '' : e.preventDefault() : /^[0-9]$/.test(e.key) ? '' : e.preventDefault();

})

现在的问题是，如果我尝试从字段中删除输入值，我不能，因为我用当前代码阻止了它，我只能允许数字和字母。

现在为了允许它们，我必须执行基于 Keycode 的方法但是 keyCode 已被弃用。

如何只允许4 Letter > 4 Letter没有白色space没有特殊字符。并允许功能按钮像 backspace shift tab 和 all..

一样工作

Answer 1

不要过多评论您要完成的内容的一般结构，最简单的方法就是捕获退格键：

if (e.key === "Enter") {
    if (!inputText.checkValidity()) {
        alert('Pattern not matched!!')
        return;
    }
} else if (e.key === 'Backspace') {
    return;
}

else if 部分需要扩展到您试图从处理中逃脱的其他键（例如 else if (e.key === 'Backspace' || e.key === 'ArrowLeft')）。

可以在 MDN.

上找到要考虑的关键值

另一种方法是扭转问题，排除所有您不想要的字符，并允许其余字符通过。

我通常会提倡 post 处理文本输入而不是阻止输入 - 所以当用户输入文本时，测试完整的输入而不是阻止错误的输入。

键盘输入有很多排列组合，因此在处理这个级别时可能有点模糊。但是，这可能不符合您的要求。

输入4个字母和4个数字没有特殊字符只限制但允许功能键？

Input 4 Letter and 4 Number No Special Character only limit but allow function Keys?

javascript

html

google-chrome

web

mozilla