Question

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

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

我的输入字段：

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

修改

我没有找readonly之类的内容，因为用户仍然需要在字段中输入字母数字文本

提前问候和感谢：）

Answer 1

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

＆＃13;

$('#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);
});

＆＃13;

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

＆＃13;

Answer 2

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

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

这不会阻止某人编写无效字符，该模式将在提交时进行评估，如果不匹配则会中止提交的消息。

更新

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

该脚本也适用于非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>

防止不允许粘贴到文本输入中

2 个答案: