Search code examples
javascriptjquerytextboxkeypress

How to detect a textbox's content has changed

I want to detect whenever a textbox's content has changed. I can use the keyup method, but that will also detect keystrokes which do not generate letters, like the arrow keys. I thought of two methods of doing this using the keyup event:

  1. Check explictly if the ascii code of the pressed key is a letter\backspace\delete
  2. Use closures to remember what was the text in the textbox before the key stroke and check whether this has changed.

Both look kinda cumbersome.

Solution

  • Start observing 'input' event instead of 'change'.

    jQuery('#some_text_box').on('input', function() {
    // do your stuff
});

    ...which is nice and clean, but may be extended further to:

    jQuery('#some_text_box').on('input propertychange paste', function() {
    // do your stuff
});