Question

I have the following jQuery code:

$("#someTextInputID").keydown(function(event){
 console.log(event.keyCode);
 console.log("input_box.val(): "+input_box.val());
 console.log("input_box.val().length: "+input_box.val().length);
})

What puzzles me is that if I type in "750", three keyCodes are logged but I also get this in my console after having typed the string above:

input_box.val(): 75

input_box.val().length: 2

What happens then with the last character i.e. "0"?

Answer 1

Quite simple, the last key pressed is not in the .value of an input until the keyup event.

The order of events when pressing a key is:

1. keydown (fires at most once per key press, key is available in event.which, but not in .value)
2. keypress (fires at least once per key press (e.g. if you hold the key down), key is available in event.which, but not in .value)
3. keyup (fires at most once per key press, key is available in event.which, and in .value)

You can detect which key was pressed during the keydown or keypress phase by examining the which property of the Event object, and using the String.fromCharCode method.

Another useful trick you can employ is to use setTimeout, but pass a value of 0 as the delay. A delay of 0 adds the callback to the back of the callstack, which delays the execution long enough for the .value to update.:

$("#someTextInputID").keydown(function(event){
    var that = this;

    setTimeout(function () {
        console.log(that.value); // will record value
    }, 0);
})