jQuery keyboard events

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.

Solution 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

Solution 2:

Use keyup event, an example on jsFiddle

$("textarea").keyup(function(e){
   alert($(this).val());
});

It happens after you lift the key. I don't know what you want to achieve, but you can store the state before lifting the key (on keydown or keypress) and restoring later if needed. You also can stop the output in the keyup event using e.preventDefault(), so even after the key is up it will not register the values in the area.

Solution 3:

You could listen on keydown event and store the value in a variable. That variable would have the value as it was before the new input, and the new input would be included in the keyup event

UPDATE:

Ok, I misunderstood your requirements, but there isn't an event that would meet your needs. The only thing I can think of to simulate this behaviour is the following:

• listen on keydown/keypress
• get the value from the event object (get event.which, then convert it to actual value)
• use a variable like I mentioned in the original advice and concatenate the new input to it

Here is a fiddle: http://jsfiddle.net/HpXuU/13/

This is obviously not a perfect solution, as it needs some (one might argue unnecessary) work to get done right. I would advise to rethink your needs, but if this behavior is absolutely what you need, I think this is a step in the right direction.

Solution 4:

You can use setTimeout:

$('input').keypress(function() {
    var that = this;
    setTimeout(function() {
        // read that.value
    }, 0);
});

Live demo: http://jsfiddle.net/HpXuU/8/