jQuery keyboard events

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

• S W: Amazing, I have never seen this event before, but it works perfectly!
• Tim Down: @franzlorenzon: Yeah, Andy's blog seems to be broken. I'll message him.
• FrenkyB: What if change in input is done programmatically? Is there a way to catch this change? (example: input is read only, changed only through some javascript code - how to catch this change?)
• Maidul: Please update or remove that blog link, its redirecting to spammer website.
• Tim Down: @Maidul: That's a shame. There were a couple of useful things on that site. I'll remove or replace the link.

Answer 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.

Answer 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.

• S W: I need the new input value before the key is lifted.
• mVChr: So you need the code to be psychic and know the user is going to lift their finger the next millisecond and not the one after?
• Daniel: @SW Well, umm... isn't that exactly what my suggestion would do? Here is a fiddle: jsfiddle.net/HpXuU/10
• lxalln: keydown will give you the value before the key is lifted
• S W: The fiddle does not work if the user is not typing at the end of the text box.

Answer 4

You can use setTimeout:

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

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

• S W: Unless I am mistaken, the timeout is not guaranteed to be called right at it's appointed time.
• Šime Vidas: @SW The setTimeout mechanism indeed has a minimum delay which is cca. 10ms (depending on the browser). However, you can define a setZeroTimeout function (code is here) which will execute immediately after the keypress event handler returns.