Listening to events of a contenteditable HTML element

Question

I\'m trying to figure out if there is any way to listen to events like focus or change of an HTML element with contenteditable attribu

Answer 1

I know this is kinda late but jQuery seems to work with focus, check this example out:

http://jsfiddle.net/powerphillg5/EGtSC/

$("#test").focus(function(){
     $("#log").append("<li>Item Focused</li>");
});

I hope this helps, but if it's not what you were looking for I will humbly accept the votes down.

Answer 2

Not really. There is no change event for contenteditable elements, and there's no HTML5 input event either, although I think that will eventually appear. It's a pain.

---

UPDATE 23 June 2012

Recent WebKit supports the HTML5 input event on contenteditable elements, as does Firefox 14.

---

focus, however, does work, as does DOMCharacterDataModified in most browsers (though notably not IE < 9). See http://jsfiddle.net/UuYQH/112/

By the way, contenteditable is not a Boolean attribute: it requires a value, which should be one of "true", "false", "inherit" and the empty string (which is equivalent to "true").

Answer 3

Blur (when the area loses focus) and focus both works. At least with jQuery. Tested with Chrome 28 and Safari 6.

$("#test").blur(function(){
  $("#log").append("<li>Item lost focus</li>");
});

Answer 4

contenteditable was introduced way back in IE 5.5, it was supported by the JavaScript 1.1 / 1.2 API and applied first to iframes, later to DIV's. Its supported in all browsers to some degree. Now in the HTML5 spec most elements can accept this attribute (but beware backwards compatibility). onchange event support may apply still to form elements as it was originally designed, having little to do with this attribute. Your option is still keypress events, which are easy to capture and when combined with a check for the target elements focus you have a similar result to onchange. It might not be ideal for edge cases but for most use cases I would go this route and its the most backwards compatible too.