Is there a cross-browser way to detect live changes to an input field?

By live, I mean not when the field loses focus, and not on the next keypress, and so on. Immediately or something like it.

Using binations of jQuery and .change(), .keyup(), .bind('paste') and so on I can get working live change detection in some browsers, but not all. Using different binations will make it work somewhat in other browsers.

The trickiest thing to get working is mouse manipulation of the input field - selecting text and moving it (which is essentially cut and paste), right-clicking and pasting or cutting, etc. For some reason even .mousedown() and .mouseup() don't seem to cut it.

The only cross-browser solution I can think of right now is to check the input field value every 100-or-so milliseconds and pare the value against a stored value. But this seems like overkill when the event-based solution es so close.

Is there a jQuery plug-in that does this already? Or is there some other way to achieve this?

Is there a cross-browser way to detect live changes to an input field?

By live, I mean not when the field loses focus, and not on the next keypress, and so on. Immediately or something like it.

Using binations of jQuery and .change(), .keyup(), .bind('paste') and so on I can get working live change detection in some browsers, but not all. Using different binations will make it work somewhat in other browsers.

The trickiest thing to get working is mouse manipulation of the input field - selecting text and moving it (which is essentially cut and paste), right-clicking and pasting or cutting, etc. For some reason even .mousedown() and .mouseup() don't seem to cut it.

The only cross-browser solution I can think of right now is to check the input field value every 100-or-so milliseconds and pare the value against a stored value. But this seems like overkill when the event-based solution es so close.

Is there a jQuery plug-in that does this already? Or is there some other way to achieve this?

• javascript
• jquery
• input
• jquery-events

• jQuery should be cross browser patible in that regard, at least for those browsers and their version found at docs.jquery./Browser_Compatibility; If this isn't the case I would suggest you file a bug. – azatoth Commented Jun 20, 2010 at 15:36
• @aza I'm not exactly sure which jQuery event helpers to use to achieve what I want (an immediate update on any change to the value of the input field), since .change() is fired when the input field loses focus. Do you know? – javascripteroo Commented Jun 20, 2010 at 21:23
• A simple solution is described here: whattheheadsaid./2010/09/… – biziclop Commented Jul 29, 2011 at 8:14

2 Answers 2

To plete your change and key handlers, you can add handlers for cut/copy/paste. They work in Firefox >=3, IE, Safari and Chrome (but not in Opera/Konqueror).

Would that cover everything for your use case?

Depending on the Browsers you need to support you might use HTML5's oninput.
It fires immediately when the monitored input changes. In jQuery you would just do:

$('#my-input').bind('input', function(e) {
    console.log("#my-input's value changed");
});