Прослушивание событий contenteditable элемента HTML

Question

Я пытаюсь выяснить, есть ли способ прослушивания таких событий, как focus или change элемента HTML с атрибутом contenteditable.

У меня есть HTML-разметка:

<p id="test" contenteditable >Hello World</p>

Я пробовал это без успеха ( 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);

Я не хочу слушать события клавиатуры или мыши. Я не нашел четкой документации в W3C и MDN о contenteditable.

Можно ли прослушивать change и focus или другие события в редактируемом HTML-элементе содержимого?

Answer 1

Не совсем.Для contenteditable элементов нет события change, и нет события HTML5 input, хотя я думаю, что оно в конечном итоге появится.Это боль.

---

ОБНОВЛЕНИЕ 23 июня 2012

Недавний WebKit поддерживает событие HTML5 input для элементов contenteditable, как и Firefox 14.

---

focus, однако, работает, как и DOMCharacterDataModified в большинстве браузеров (хотя, в частности, не IE <9).См. <a href="http://jsfiddle.net/UuYQH/112/">http://jsfiddle.net/UuYQH/112/

Кстати, contenteditable не является логическим атрибутом: для него требуется значение, которое должно быть одним из «истина», «ложь», «наследовать» и пустая строка (котораяэквивалентно "true").

Answer 2

Я знаю, что это немного поздно, но jQuery, кажется, работает с фокусом, посмотрите этот пример:

http://jsfiddle.net/powerphillg5/EGtSC/

$("#test").focus(function(){
     $("#log").append("<li>Item Focused</li>");
});

Надеюсь, это поможет, но если это не то, что вы искали, я смиренно приму голоса.

Answer 3

contenteditable была введена еще в IE 5.5, она поддерживалась API JavaScript 1.1 / 1.2 и применялась сначала к фреймам, потом к DIV.Он поддерживается во всех браузерах до некоторой степени.Теперь в спецификации HTML5 большинство элементов могут принять этот атрибут (но остерегайтесь обратной совместимости).Поддержка событий onchange может по-прежнему применяться к элементам формы, как это было изначально задумано, имея мало общего с этим атрибутом.Вы по-прежнему можете использовать события нажатия клавиш, которые легко регистрировать, и в сочетании с проверкой фокусировки целевых элементов вы получаете аналогичный результат для onchange.Возможно, он не идеален для крайних случаев, но для большинства случаев использования я бы пошел по этому пути, и он также является наиболее обратно совместимым.

Answer 4

Размытие (когда область теряет фокус) и фокусировка работает. По крайней мере, с JQuery. Протестировано с Chrome 28 и Safari 6.

$("#test").blur(function(){
  $("#log").append("<li>Item lost focus</li>");
});