Textarea onchange detection

by

The best way to do this, cross-browser: use a combination of the input and onpropertychange events, like so:

var area = container.querySelector('textarea');
if (area.addEventListener) {
  area.addEventListener('input', function() {
    // event handling code for sane browsers
  }, false);
} else if (area.attachEvent) {
  area.attachEvent('onpropertychange', function() {
    // IE-specific event handling code
  });
}

The input event takes care of IE9+, FF, Chrome, Opera and Safari, and onpropertychange takes care of IE8 (it also works with IE6 and 7, but there are some bugs).

The advantage of using input and onpropertychange is that they don’t fire unnecessarily (like when pressing the Ctrl or Shift keys); so if you wish to run a relatively expensive operation when the textarea contents change, this is the way to go.

Now IE, as always, does a half-assed job of supporting this: neither input nor onpropertychange fires in IE when characters are deleted from the textarea. So if you need to handle deletion of characters in IE, use keypress (as opposed to using keyup / keydown, because they fire only once even if the user presses and holds a key down).

Source: http://www.alistapart.com/articles/expanding-text-areas-made-elegant/

EDIT: It seems even the above solution is not perfect, as rightly pointed out in the comments: the presence of the addEventListener property on the textarea does not imply you’re working with a sane browser; similarly the presence of the attachEvent property does not imply IE. If you want your code to be really air-tight, you should consider changing that. See Tim Down’s comment for pointers.

More Related Contents:

  1. language for creating contract template [closed]
  2. What is the difference between parseInt() and Number()?
  3. Equivalent of String.format in jQuery
  4. Print content of JavaScript object? [duplicate]
  5. How to draw an inline svg (in DOM) to a canvas?
  6. Contexts and methods for communication between the browser action, background scripts, and content scripts of chrome extensions?
  7. Trim specific character from a string
  8. What is the purpose of new Boolean() in Javascript?
  9. Draw arrow on canvas tag
  10. Set a callback function to a new window in javascript
  11. Cannot access cssRules from local css file in Chrome 64
  12. Does extension messaging like chrome.runtime.sendMessage internally use JSON.stringify?
  13. Debug JavaScript in Eclipse
  14. new Image(), how to know if image 100% loaded or not?
  15. How to remove backslash escaping from a javascript var?
  16. how to read json result in jquery?
  17. Group by and calculate mean / average of properties in a Javascript array
  18. Promise.all().then() resolve?
  19. How to correctly use axios params with arrays
  20. HTML5 video javascript controls – restart video
  21. Reload the site when reached via browsers back button
  22. Trigger for span text/html on changed
  23. Javascript mixins when using the module pattern
  24. Selecting elements without jQuery
  25. Set cookie on multiple domains with PHP or JavaScript
  26. JavaScript Callback after calling function
  27. In JavaScript, how can I replace text in an HTML page without affecting the tags?
  28. Cannot Upload File to FastAPI backend using JavaScript Fetch API in the frontend
  29. Difference between application/x-javascript and text/javascript content types
  30. Is there a way to catch an attempt to access a non existant property or method?

Leave a Comment