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

Я пытаюсь выяснить, есть ли способ прослушать такие события, как 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 элементе?

Ответы

Ответ 1

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

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

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

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

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

Ответ 2

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

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

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

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

Ответ 3

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

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

Ответ 4

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