Jquery text change event

Question

I need to fire an event anytime the content of a textbox has changed.

I cant use keyup nor can I use keypress.

Keyup and keydown doesn't work if you hold down on the key.

Keypress triggers before the text has actually changed. It doesn't recognize backspace or delete either.

So now I'm assuming I'm going to have to build some custom logic or download a plugin. Are there any plugins out there? Or if I should build one, what constraints should I look out for?

For eg. Facebook does it with their search at the top. you can press and hold.

another example is writing a stackoverflow question. Right below the editor, the contents are copied in real time, backspace and everythng works. How do they do it?

Answer 1

I just took a look at SO's source. It looks like they do something a lot like this:

function updatePreview(){
    $('div').text($('textarea').val());
}

$('textarea').bind('keypress', function(){
        setTimeout(updatePreview, 1);
    }
);​

They do some extra stuff to make HTML tags for bold and italics and links and such and they time it. They increase the delay from 1 to longer if it takes too long to generate the HTML.

Answer 2

I had success using jQuery (in Chrome). If you hold a key down, it counts every change, not just the first one, and it counts non-print keys like backspace.

HTML

<input id="txt" type="text" />
<span id="changeCount">0</span>

JavaScript

$('#txt').keydown(function(event) {
    // Don't count the keys which don't actually change
    // the text. The four below are the arrow keys, but
    // there are more that I omitted for brevity.
    if (event.which != 37 && event.which != 38 &&
        event.which != 39 && event.which != 40) {

        // Replace the two lines below with whatever you want to
        // do when the text changes.
        var count = parseInt($('#changeCount').text(), 10) + 1;
        $('#changeCount').text(count);

    }
});

Like I said above, you'll want to filter out all of the key codes that don't change the text, like ctrl, shift, alt, enter, etc. There's also the boundary condition if you press the backspace or delete key when the textbox is empty or if the textbox has a maximum length and a printable key is pressed, but it's not terribly difficult to handle those either.

Here's a working jsfiddle example.