views:

78

answers:

1

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 combinations 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 combinations 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 compare the value against a stored value. But this seems like overkill when the event-based solution comes so close.

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

+2  A: 

To complete 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?

Chris Lercher
Looks promising. Doesn't detect drag-and-drop changes in IE8 though. Thanks, will investigate further. `Traditional` event attach method is `elm['onchange'] = fn`?
javascripteroo
@javascripteroo: Good to know, that about IE8. Yes, that's the traditional model (same as elm.onchange = fn), more info here: http://www.quirksmode.org/js/events_tradmod.html
Chris Lercher