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

Question

我想将我的文本输入限制为只有 4 个字母，然后是 4 个数字，并且没有特殊字符和空格。

和我写的代码：

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 无空格 无特殊字符。并允许功能按钮像退格键一样工作。

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 上找到要考虑的关键值。

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

我通常主张对文本输入进行后处理而不是阻止其输入 - 所以当用户输入文本输入时，测试完整的条目而不是防止错误的输入。

键盘输入有许多排列，所以在这个级别处理它可能有点模糊。但是，这可能不符合您的要求。