Bug 20208 – contenteditable items don't send notifications when they're edited

• Component: HTML Editing
• Status: RESOLVED WONTFIX

[Bernhard Rosenkraenzer]

Currently, there doesn't seem to be a way of reacting when a contenteditable item changes.

Something akin to the onchange="" bits in normal html input fields would be nice. (e.g. <p contenteditable="true" onchange="validateinput()">Please modify this text</p>)

You can listen for DOM mutation events on the element. For example, editing text nodes will result in DOMCharacterDataModified events.

[David Gatwood]

I was about to file a bug about this problem myself.  The only case I care about is detecting when the user deletes a non-contentEditable node within a contentEditable container.  Neither the non-editable node itself nor the editable parent gets any sort of mutation event when this happens.

[Julie Parent]

Would oninput events meet your needs?  See https://bugs.webkit.org/show_bug.cgi?id=26526 for more details.

[Ojan Vafai]

Looks like the input event meets this use case. Feel free to reopen if it does not.

[David Gatwood]

Created attachment 61443 [details]
demonstration of the textInput event not firing.

[David Gatwood]

I finally got around to testing it.  The textInput event completely fails to meet the needs.

1.  It requires writing JavaScript to go wading through the HTML and adding handlers everywhere (unlike onChange, which can be written as an attribute in the tag).

2.  Deleting stuff in contentEditable blocks doesn't fire these events, at least in Safari 5.  I've attached a really trivial test case.  Click anywhere and hit the backspace key.  You can delete entire lines of content without a single textInput event firing.

[Ojan Vafai]

It's the "input" event that you want. It will only work in a nightly build since it was just checked in recently.