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.