How to REALLY limit the available character for an input field using jQuery?

Question

Hi,

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.

Thanks!

Answer 1

Try using keydown instead of keyup

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

Aside: You selector is slower than it needs to be. ID is unique, and fastest, so

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

Should suffice

You might want to consider capturing the keycode iself, before assigning it to the val

if (event.keyCode == ...)

Also, are you considering the alt, ctls, and shift keys?

if (event.shiftKey) {

if (event.ctrlKey) {

if (event.altKey) {

Answer 2

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>

Answer 3

You can use the maxlength property in inputs and passwords: info (that's actually the way Twitter does it).

Answer 4

Thanks @TimDown that solved the issue! I modified your code a little so it accepts backspace and arrows for editing (I post a reply to use code formatting).

Thank you very much.

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;
};