防止未经允许的粘贴到文本输入中

Question

我试图阻止用户将不允许的文本粘贴到输入字段中。输入是随机生成的 8 位代码，包含字母和数字。

但我不希望用户粘贴任何包含其他字符的文本。

我的输入框：

<input type='text' id='form-code-field' name='code' maxlength='8'>

注意：

我不是在寻找类似readonly 属性的东西，因为用户仍然需要在字段中输入字母数字文本。

Answer 1

您可以在input 事件上使用正则表达式测试值输入：

$('#form-code-field').on('input', function(){
    if(!/^[a-z0-9]+$/i.test(this.value)) this.value = $(this).data('oldValue') || "";
    else $(this).data('oldValue', this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='text' id='form-code-field' name='code' maxlength='8'>

Answer 2

对于 HTML5 浏览器，您也可以这样做，并且不需要脚本：

<input type='text' name='code' maxlength='8' pattern="^[a-z0-9]+$" title="a-z0-9">

这不会阻止某人写入无效字符，模式将在提交时进行评估，如果不匹配，则会中止提交并显示一条消息。

更新

我为那些不使用 jQuery 的人添加了一个纯 javascript 版本，它可以在表单上全局工作。只需在输入字段上设置“模式”即可。

该脚本也适用于非 HTML5 浏览器上的输入。

“安全”提示：

作为客户端评估，仅存储服务器端绝不是 100% 安全的，您总是需要在对其进行任何操作之前检查发布的内容。

document.getElementById('form').addEventListener('input', function(e){
  
    if (e.target.pattern && e.target.pattern.length > 0) {
        var regex = new RegExp(e.target.pattern,"i");
        if(!regex.test(e.target.value)) {
            if (e.target.value.length > 0) {
                e.target.value = e.target.getAttribute('data-old-value') || "";
            } else {
                e.target.setAttribute('data-old-value', "");
            }
        } else {
            e.target.setAttribute('data-old-value', e.target.value);
        }
    }
  
}, false);

<form id="form">

  Only alphanum (max 8): <input type='text' id='form-code-field' name='code' maxlength='8' pattern="^[a-z0-9]+$" title="a-z0-9"><br /><br />

  Any character (max 5): <input type='text' id='form-code-field' name='code' maxlength='5' ><br />

</form>