contenteditable change events

by

2022 update

As pointed out in the comments, this doesn’t answer the question asked, which wanted the equivalent of the change event rather than the input event. However, I’ll leave it here as is.

Original answer

I’d suggest attaching listeners to key events fired by the editable element, though you need to be aware that keydown and keypress events are fired before the content itself is changed. This won’t cover every possible means of changing the content: the user can also use cut, copy and paste from the Edit or context browser menus, so you may want to handle the cut copy and paste events too. Also, the user can drop text or other content, so there are more events there (mouseup, for example). You may want to poll the element’s contents as a fallback.

UPDATE 29 October 2014

The HTML5 input event is the answer in the long term. At the time of writing, it is supported for contenteditable elements in current Mozilla (from Firefox 14) and WebKit/Blink browsers, but not IE.

Demo:

document.getElementById("editor").addEventListener("input", function() {
    console.log("input event fired");
}, false);
<div contenteditable="true" id="editor">Please type something in here</div>

Demo: http://jsfiddle.net/ch6yn/2691/

More Related Contents:

  1. Set cursor position on contentEditable
  2. Prevent contenteditable adding on ENTER – Chrome
  3. How to select all text in contenteditable div?
  4. Extracting text from a contentEditable div
  5. Get content of span
  6. Reloading a single div in an html page [closed]
  7. jQuery doesn’t give a proper output, but gives these [closed]
  8. fixing slider on my website [closed]
  9. Stop form refreshing page on submit
  10. Highlight a word with jQuery
  11. What is the most efficient way to create HTML elements using jQuery?
  12. Sorting options elements alphabetically using jQuery
  13. Prevent form submission with enter key
  14. Reset select value to default
  15. focus doesn’t work in IE
  16. Counting and limiting words in a textarea
  17. How to open specific tab of bootstrap nav tabs on click of a particuler link using jQuery?
  18. Change iframe src by clicking a link
  19. Proper way to reset a GIF animation with display:none on Chrome
  20. How do I capture a key press (or keydown) event on a div element?
  21. How can I prevent a click on a ‘#’ link from jumping to top of page?
  22. Passing JSON data from php to html-data attribute and then to Javascript
  23. iframe Auto Adjust Height as content changes
  24. How can I dynamically highlight strings on a web page?
  25. minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes
  26. Rotate div text after clicking on button using jquery and css
  27. How to access jQuery in HTML 5 web worker
  28. Hot to get incomplete datetime-local input values
  29. Incrementing value continuously on mouse hold
  30. Content of html page changed by jQuery but “View Source” don’t reflect the changes

Leave a Comment