I have a regular text-box:

<input type=text> 

I use jQuery to handle key-related events:

$(input:text).keydown(function() {

    // keydown code

}).keypress(function() {

    // keypress code

}).keyup(function() {

    // keyup code

});

The user focuses on a text-box and presses various keys on his keyboard (the usual ones: letters, numbers, SHIFT, BACKSPACE, SPACE, ...). I need to detect when the user presses a key that is going to increase the length of the text-box value. For example, the A key will increase it, the SHIFT key wont.

I remember watching a lecture by PPK where he mentioned the difference between those two. It has something to do with the event - keydown vs. keypress - and possibly with the event properties - key, char, keyCode.

Update!

I need to know this information within the keydown or keypress handlers. I cannot wait for the keyup event to occur.

Why I need this:

I have a text-box which size dynamically changes based on the user input. You can have a look at this demo: http://vidasp.net/tinydemos/variable-size-text-box.html

In the demo, I have a keydown and keyup handler. The keyup handler adjusts the text-box size based on the input value. However, the keydown handler sets the size to be 1 character larger then the input value. The reason I do this is that if I didn't, then the character would overflow outside the text-box and only when the user would let go of the key, the text-box would expand. This looks weird. That's why I have to anticipate the new character - I enlarge the text-box on each keydown, ergo, before the character appears in the text-box. As you can see in the demo, this method looks great.

However, the problem are the BACKSPACE and ARROW keys - they will also expand the text-box on keydown, and only on keyup the text-box size will be corrected.

A work-around:

A work-around would be to detect the BACKSPACE, SHIFT, and ARROW keys manually and act based on that:

// keydown handler

function(e) {

    var len = $(this).val().length;

    if (e.keyCode === 37 || e.keyCode === 39 ||

        e.keyCode === 16) { // ARROW LEFT or ARROW RIGHT or SHIFT key

        return;

    } else if (e.keyCode === 8) { // BACKSPACE key

        $(this).attr(size, len <= 1 ? 1 : len - 1);

    } else {

        $(this).attr(size, len === 0 ? 1 : len + 1);

    }

}

This works (and looks great) for BACKSPACE, SHIFT, ARROW LEFT and ARROW RIGHT. However, I would like to have a more robust solution.