javascript - make - Listening to events of a contenteditable HTML element




onclick editable text field (3)

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?


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>");
});

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.


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.





mutation-events