1

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

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

这适用于字母数字验证，但不允许使用 home 键、end 键或箭头键放置光标；光标只能使用退格键移动。老实说，这在某些情况下是可取的行为，但在其他情况下则不然。

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

4

2 回答 2

3

由于您要在每次击键时替换全部内容（实际上，每次击键 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 处理程序中，以确保该字段在运行时已经存在）。

演示

于 2013-03-19T21:26:43.757 回答
1

两件事：首先，您要触发该事件三次，这似乎没有必要。试试这个：

<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);" />
于 2013-03-19T21:27:38.267 回答