17

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?

000
  • 26,951
  • 10
  • 71
  • 101
Mohsen
  • 64,437
  • 34
  • 159
  • 186
  • Checkout the second answer to this question.http://stackoverflow.com/questions/1391278/contenteditable-change-events – rwilliams Oct 18 '11 at 05:31

4 Answers4

23

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").

Tim Down
  • 318,141
  • 75
  • 454
  • 536
  • Thanks, your fiddle is not working in my Chrome. Also `contenteditable` is correct based on docs I think – Mohsen Oct 18 '11 at 18:33
  • @Mohsen: Works for me in Chrome. It probably isn't clear, but the idea is to type in the contenteditable div at the top rather than the texarea, which is there to log events. – Tim Down Oct 19 '11 at 00:02
  • @Mohsen: I should have added a link to the HTML5 spec for the `contenteditable` attribute. Here it is: http://www.w3.org/TR/html5/editing.html#contenteditable – Tim Down Oct 21 '11 at 08:57
  • It seems it changed, it used to be as I wrote. Anyway contenteditable without any value is working fine – Mohsen Oct 21 '11 at 16:48
  • @Mohsen: I don't think it changed. I've used these events occasionally on Chrome for quite a long time. – Tim Down Oct 21 '11 at 17:19
  • Your fiddle is a little misleading, I typed in the `` instead of `

    ` element, nothing happened then I found myself typed in the wrong area..     – ThemeZ Nov 20 '12 at 09:35
2

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.

Philll_t
  • 4,267
  • 5
  • 45
  • 59
2

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>");
});
pussmun
  • 143
  • 1
  • 2
  • 12
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.

user3231324
  • 99
  • 2