Получить событие удаления отредактированного элемента

Question

Я пытаюсь смоделировать (не существует) событие изменения для элемента contentEditable (но я думаю, что это та же проблема для элемента ввода).К сожалению, я не знаю, как получить событие, когда пользователь выделил какой-то текст и выбрал «Удалить» из контекстного меню в браузере.

Есть предложения, как это получить?

Answer 1

Пересмотренный ответ, 8 июня 2012 г.

То, что вы хотите, это HTML5 input событие . Однако в настоящее время это работает только в WebKit для contenteditable элементов, но, надеюсь, будет реализовано и в других браузерах: Firefox 14, по-видимому, будет иметь . уже реализован во всех основных браузерах для ввода текста и текстовых сообщений .

Демо: 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);

Для кросс-браузерного решения вы можете использовать некоторые из событий мутации DOM (также см. MDN ), которые будут запущены. Я бы предположил, что DOMCharacterDataModified и, возможно, DOMNodeRemoved будут полезны для этой цели.

Обратите внимание, что эти события не существуют в IE <= 8. Более того, <strong>эти события устарели в пользу Наблюдателей мутации DOM4 . Однако на момент написания этой статьи (июнь 2012 г.) только самые последние браузеры WebKit поддерживают это, поэтому в краткосрочной и среднесрочной перспективе мы застряли с мутационными событиями в качестве запасного варианта как минимум.

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