Question

I’m wanting to fire a JavaScript event when the text inside a textbox changes, be it via the user typing text, copy-pasting text or dragging text. The one I’m having trouble with is where users drag text from somewhere in to a textbox.

In the case of dragging text between textboxes, in chrome, the change() event is fired once for the textbox that it was dragged from, and a second time when the text is dropped into the destination textbox.

In Firefox or IE8, the change event never fires.

Is there a more suitable event I can listen for that works cross browser?

Here’s an example

For documentation purposes, here’s the code I’m using, copied from the 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 one is 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
    }
});

these will fire the event for however the content inside the input box changes.