javascript - 正则表达式验证不允许 home、end、箭头键工作

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