Question

问题：我有一个html文本输入，它使用onpress，onkeydown和onkeyup事件中的以下代码：

this.value = this.value.replace(/[^a-zA-Z0-9]/, '')

这适用于字母数字验证，但不允许使用主页键，结束键或箭头键放置光标;只能使用退格键移动光标。说实话，在某些情况下这是理想的行为，但在其他情况下则不然。

为什么Firefox和Chrome中的这种行为（尚未在IE中测试过）？我的问题是它与this.value =部分有关，将光标放在最后，因为我从未见过箭头键的正则表达式等。

Answer 1

由于您在每次击键时都会更换整个内容（实际上，每次击键次数为3次），因此在替换后将插入符号放在最后。

我建议采用另一种方法：只有在验证未通过时才替换字段的内容：

<input id="uname" type="text">

var f = document.getElementById('uname');
f.addEventListener('keyup', function(e){
    var regex = /[^a-zA-Z0-9]/;
    if(regex.test(this.value)) {
        this.value = this.value.replace(regex, '')  
    }
});

_{上面的JavaScript代码段应该在<script>之前的</body>标记内添加（或者包含在document.ready / DOMContentLoaded / window.onload处理程序中，以确保该字段已经存在它运行时存在。）}

Demo

Answer 2

两件事：首先，你要三次开火，这似乎是不必要的。试试这个：

<script type="text/javascript">
    function forceAlphaNumeric(field){
        var invalidChars = /[^a-z0-9]/ig
        if(field.value.match(invalidChars))
            field.value = field.value.replace(invalidChars, '');
     }
</script>
<input id="uname" type="text" onkeypress="forceAlphaNumeric(this);" />

正则表达式验证不允许home，end，arrow键工作

2 个答案: