javascript - 如何使用 jQuery 真正限制输入字段的可用字符？

Question

我刚开始将 JS 验证添加到注册表单中，我想要 Twitter 样式的用户名输入字段(使用 jQuery)。这意味着输入仅限于某些字符，而其他字符甚至不会出现。

到目前为止，我得到了这个:

jQuery(document).ready(function() {
 jQuery('input#user_login').keyup(function() { 
    jQuery(this).val( jQuery(this).val().replace(/[^a-z0-9\_]+/i, '') );
  });
});

此解决方案有效，但问题是只要用户未释放 key (请原谅我糟糕的英语!)并且未触发 keyup 事件，就会出现非法字符.该字符在输入字段中闪烁一秒钟，然后消失。

理想的解决方案应该是 Twitter 的做法: Angular 色甚至一次都不会出现。

我该怎么做？我想我必须以某种方式拦截输入。

Answer 1

如果你想限制用户可以输入的字符而不是要处理的特定键，你必须使用keypress，因为这是唯一报告字符信息而不是键码的事件.这是一个在所有主流浏览器中将字符限制为仅 A-Z 字母的解决方案(不使用 jQuery):

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


<script type="text/javascript">

function alphaFilterKeypress(evt) {
    evt = evt || window.event;
    var charCode = evt.keyCode || evt.which;
    var charStr = String.fromCharCode(charCode);
    return /[a-z]/i.test(charStr);
}

window.onload = function() {
    var input = document.getElementById("alpha");
    input.onkeypress = alphaFilterKeypress;
};

</script>