如何限制输入元素中允许的字符集？

Question

我知道这个问题之前已经被问过，但是我在这里看到的所有解决方案都有一些局限性。

我想要实现的目标：我有一个输入字段，应仅允许输入或粘贴字母数字字符，并且总长度不得超过 N 个字符。它应该可以在移动浏览器中运行。

到目前为止我已经尝试过：

1. 输入事件。仅当失去焦点时触发。
2. 按键事件 ( return this.value.length < 8 && (event.keyCode >= 65 && event.keyCode <= 90 || event.keyCode >= 97 && event.keyCode <= 122 || event.keyCode >= 48 && event.keyCode <= 57))。不影响粘贴，并且由于某些奇怪的原因在 Android 上的 Chrome 中根本不起作用。
3. 模式属性。工作正常，但不会“即时”验证任何内容 - 所有验证都会在提交表单时发生。

据我所知，这是一个典型的任务（支付表单上的 CVV 代码/卡号、电子商务中的订单号等），但所有解决方案都有一些缺点。看来我错过了一些东西。请帮忙。

Answer 1

使用输入模式怎么样？

<input type="text" pattern="[A-Za-z]{3}" title="Three letters">
<input type="text" pattern="[0-9]{3}" title="Three numbers">    
<input type="text" pattern="[A-Za-z0-9]{3}" title="Three alphanumeric">

结合这样的答案 和这个

Answer 2

我曾经需要做同样的事情，我发现最好的解决方案是有一个监听器，每次输入字段发生变化时都会调用该监听器。为此，您应该能够使用oninputhtml 属性或相应的inputjavascript 事件。

W3Schools 的这个演示很好地演示了它如何响应输入更改。特别是，它不仅在失去焦点时触发，而且在粘贴文本时也有效。当然，在侦听器内部，您可以检查输入中的当前文本是否符合您想要的内容。

这个解决方案更酷的是，您甚至可以从侦听器内编辑输入字段内的文本。为此，您需要input使用 javascript 将侦听器添加到事件中addEventListener(...)，然后使用this.value = 'new text';.