Listening to events of a contenteditable HTML ele

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 attribute.

I have this html markup:

<p id="test" contenteditable >Hello World</p>

I've tried these without any success(JSBin):

var test = document.querySelector('#test');
test.addEventListener('change', function(){
  alert('content edited');
}, false);
test.addEventListener('DOMCharacterDataModified', function(){
  alert('content edited');
}, false);
test.addEventListener('focus', function(){
  alert('content edited');
}, false);

I don't want to listen to keyboard or mouse events. I didn't find any clear documentation in W3C and MDN about contenteditable.

Is it possible to listen to change and focus or other events on a content editable HTML element?

Answer 1

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.

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

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.