Question

I just started adding JS-validation to a signup form and I want the username input field in a Twitter-style (using jQuery). That means that the input is limited to certain characters and other characters do not even appear.

So far, I’ve got this:

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

This solution works, but the problem is that the illegal character appears as long as the user hasn’t released the key (please excuse my terrible English!) and the keyup event isn’t triggered. The character flickers in the input field for a second and then disappears.

The ideal solution would be the way Twitter does it: The character doesn’t even show up once.

How can I do that? I guess I’ll have to intercept the input in some way.

Answer 1

If you want to limit the characters the user may type rather than the particular keys that will be handled, you have to use keypress, as that’s the only event that reports character information rather than key codes. Here is a solution that limits characters to just A-Z letters in all mainstream browsers (without using 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>