Question

我刚刚开始在注册表单中添加JS-validation，我想要一个Twitter风格的用户名输入字段（使用jQuery）。这意味着输入仅限于某些字符，甚至不会出现其他字符。

到目前为止，我已经有了这个：

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

这个解决方案有效，但问题是只要用户没有释放密钥就会出现非法字符（请原谅我可怕的英文！）并且不会触发keyup事件。字符在输入字段中闪烁一秒钟然后消失。

理想的解决方案将是Twitter的方式：角色甚至不会出现一次。

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

谢谢！

Answer 1

尝试使用keydown而不是keyup

jQuery('input#user_login').keydown(function() {

旁白：你的选择器比它需要的慢。 ID是唯一且最快的，所以

jQuery('#user_login').keydown(function() {

应该足够了

在将其分配给val

之前，您可能需要考虑捕获keycode iself

if (event.keyCode == ...)

另外，你在考虑alt，ctls和shift键吗？

if (event.shiftKey) {

if (event.ctrlKey) {

if (event.altKey) {

Answer 2

如果要限制用户可以键入的字符而不是要处理的特定键，则必须使用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>

Answer 3

感谢@TimDown解决了这个问题！我修改了你的代码，所以它接受退格和箭头进行编辑（我发布回复使用代码格式）。

非常感谢。

function alphaFilterKeypress(evt) {
    evt = evt || window.event;

    // START CHANGE: Allow backspace and arrows
    if(/^(8|37|39)$/i.test(evt.keyCode)) { return; }
    // END CHANGE

    var charCode = evt.keyCode || evt.which;
    var charStr = String.fromCharCode(charCode);

    // I also changed the regex a little to accept alphanumeric characters + '_'
    return /[a-z0-9_]/i.test(charStr);
}

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

Answer 4

您可以在输入和密码中使用 maxlength 属性：info（实际上就是Twitter的方式）。

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

4 个答案: