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

【问题标题】：How to restrict set of allowed characters in input element?如何限制输入元素中允许的字符集？
【发布时间】：2018-06-24 12:23:56
【问题描述】：

我知道以前有人问过这个问题，但我在这里看到的所有解决方案都有一些限制。

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

到目前为止我所尝试的：

输入事件。仅在失去焦点时触发。
onkeypress 事件 (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 中根本不起作用。
模式属性。工作正常，但不会“即时”验证任何内容 - 所有验证都在提交表单时进行。

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

【问题讨论】：

像往常一样，使用oninput 事件而不是keyevents。 input 事件肯定会在输入元素的每次更改时触发，onchange 仅在失去焦点时触发。
谢谢！但是如何限制oninput事件中的字符集呢？我试过this.value = this.value.substring(0, 8).replace(/[^a-zA-Z0-9]/g, '')，但是当用户在中间插入一些东西时，光标会移动到输入控件的末尾。
好吧，您目前似乎正在做的是在每次输入更改时替换值，即使这不是必需的！为了防止光标移动到末尾，您可以做的是测试新文本是否违反某些条件（在这种情况下，如果它超过 8 个字符，或者它是否包含范围 az、AZ 和 0-9 以外的字符) 并且仅在这种情况下更新值。
如何防止oninput事件中的值更新？

标签： javascript jquery html validation

【解决方案1】：

用Input Pattern怎么样？

<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">

结合this answer之类的东西和this

【讨论】：

【解决方案2】：

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

来自 W3Schools 的This demo 很好地展示了它如何响应输入变化。特别是，它不仅会在失去焦点时触发，而且在粘贴文本时也会起作用。当然，在侦听器内部，您可以检查输入中的当前文本是否符合您的要求。

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

【讨论】：

【解决方案3】：

当您将 type=number 属性放置到输入时，使用 Html5 输入中内置的验证将阻止非数字输入。如果要设置允许进入的最大数量，也可以使用 max 属性。您仍然需要实现某种类型的客户端代码来防止旧浏览器出现数字，但基本的 Html5 验证在任何体面的“真实”浏览器（Chrome、Firefox、IE v9+ 等）上都可以为您工作

Here 是关于输入 type="number" 的文档

元素自动使任何条目无效这不是数字（或为空，除非指定需要）。
您可以使用 required 属性使空条目无效，即必须填写输入。
您可以使用 step 属性将有效值限制为某个一组步骤（例如 10 的倍数）。
您可以使用 min 和 max 属性将有效值限制为下限和上限。

【讨论】：

感谢您的回答，但type=numeric 不符合我的需求，因为我需要字母数字输入。 required 属性影响表单提交，而不是输入。