Question

Using jQuery, I would like to capture a keyboard event that is:

• before the user lifts their finger from the key
• after the characters from the keyboard event have registered in the input box.

To clarify, view this example. When keypress fires, the input value has not been updated yet.

[Edit]

Apparently I wasn’t clear as to what I need.

The function must be called before the user lifts their finger up from the key, but after the key’s character is placed in the input box. So the following do not work:

• keydown: at the keypress event, the value in the text box has not been updated
• keypress: at the keypress event, the value in the text box has not been updated
• keyup: this is called when the user lifts their finger, which is too late.

Answer 1

You can use the input event, which works in recent versions of all major browsers:

var input = document.getElementById("your_input_id");
input.oninput = function() {
    alert(input.value);
};

Unfortunately, it doesn’t work in IE <= 8. However, in those browsers you can use the propertychange event on the value property instead:

input.onpropertychange = function() {
    if (window.event.propertyName == "value") {
        alert(input.value);
    }
};

SO regular JavaScript answerer @Andy E has covered this in detail on his blog: https://web.archive.org/web/20140626060232/http://whattheheadsaid.com/2011/10/update-html5-oninput-event-plugin-for-jquery