Toggle javascript event firewall when dragging text into text box

Question

I want to fire a javascript event when the text inside the text field changes, whether through user input of text, copying text, or dragging text. I'm having problems with where users drag and drop text from anywhere in the text box.

In the case of dragging text between text fields, in chrome, the change () event is fired once for the text field from which it was dragged, and the second time the text is deleted in the destination text field.

In firefox or IE8, the change event never fires.

Is there a more suitable event that I can listen for for the cross browser to work?

Here is an example

For documentation purposes, here the code I use is copied from jsfiddle above.

HTML

<input value="drag me over there"> <input> <div class="message"></div> 

JQuery

 $('input').change(function() { $('.message').append('changed<br/>'); }); 

Answer 1

The first example below works in all recent browsers, including ie9, the second for ie8 and below.

 $("some input element").bind("input", function () { // do something }); $('some input element').bind("propertychange", function (e) { if (e.originalEvent.propertyName == "value") { // do something } }); 

this will trigger an event, but the contents inside the input field will change.