Question

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

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

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

input 事件。仅在失去焦点时触发。
onkeypress 事件（['drs', 'spatial_ref_sys', 'users']）。不会影响粘贴，并且出于某些奇怪的原因在Android的Chrome浏览器中根本无法正常工作。
模式属性。效果很好，但是不会“即时”验证任何内容-提交表单时会进行所有验证。

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

Answer 1

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

W3Schools的

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

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

Answer 2

使用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

Answer 3

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

Here是有关输入类型=“ number”

的文档

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

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

3 个答案: