Get delete event of edited element

Question

I am trying to simulate the (not existing) change event for a contentEditable element (but I guess it is the same problem for an input element). Unfortunately I don't know how to fetch the event when the user selected some text and chose "Delete" from the context menu in the browser.

Any suggestions how I could get that?

score 1 · Answer 1 · edited May 23 '17 at 12:20

1

Revised answer, 8 June 2012

What you want is the HTML5 input event. However, this currently only works in WebKit for contenteditable elements but hopefully will be implemented in other browsers too: Firefox 14 will apparently have it. It's already implemented in all major browsers for text inputs and textareas.

Demo: http://jsfiddle.net/timdown/5e5E5/1/

HTML:

<div id="test" contenteditable="true">...</div>

JS:

var editableDiv = document.getElementById("test");

editableDiv.addEventListener("input", function(evt) {
    alert("Editable content changed");
}, false);

For a cross-browser solution, you can use some of the various DOM mutation events (also see MDN) that will be fired. I'd suggest DOMCharacterDataModified and possibly DOMNodeRemoved will be the useful ones for this purpose.

Note that these events do not exist in IE <= 8. Furthermore, these events are deprecated in favour of DOM4 Mutation Observers. However, at the time of writing (June 2012), only very recent WebKit browsers support this, so for the short to medium term we're stuck with mutation events as a fallback at minimum.

editableDiv.addEventListener("DOMCharacterDataModified", function(evt) {
    if (evt.newValue.length < evt.prevValue.length) {
        alert("Characters deleted");
    }
}, false);

edited May 23 '17 at 12:20

Community

1
1

answered Apr 10 '11 at 21:14

Tim Down

318,141
75
454
536

@EliranMalka: I've been following the the mutation observers spec with interest. However, it hadn't got anywhere when I wrote this answer and DOM mutation events are still the only viable option in the short to medium term because only very recent WebKit and Firefox support the new mutation observers. I've updated my answer to reflect this. – Tim Down Jun 07 '12 at 14:38
yes, perhaps an update to add a disclaimer is a good option. it's a good answer (hence i up-voted it), since it seems like the only way to address this issue at the moment. i'm looking for a better solution tho, hope to find one that is sufficiently robust and widely supported. *(this correspondence has originated from a deleted comment requesting to avoid using DOM mutation events)*. – Eliran Malka Jun 07 '12 at 14:44
@EliranMalka: I don't think a better alternative exists, although WebKit supports the `input` event on `contenteditable` elements. Nothing else does though. See http://jsfiddle.net/upbNW/ – Tim Down Jun 07 '12 at 14:49
@EliranMalka: Thanks for drawing my attention to this, and sorry for my initially defensive tone. – Tim Down Jun 07 '12 at 14:49
BTW, `input` events are exactly what **i** was after (the OP had `contenteditable` in mind), so that really came through for me. your commitment and willing to help (along with the thorough research) reminds me what stackoverflow is all about. thanks a lot. – Eliran Malka Jun 10 '12 at 09:23
@MorganTiley: Yes, I'm almost certain it is. I've never found a way to do it, anyway, and I've tried reasonably hard. Of course, there's always polling. – Tim Down Jun 13 '12 at 14:51

Get delete event of edited element

1 Answers1

Linked