Я имею дело с содержимым редактируемого div, и мне нужно иметь дело с захватом ключевых штрихов как до, так и после того, как символ добавлен в div.Событие захвата против пузыря с contentEditable div
Мое понимание захвата и барботажа состоит в том, что событие захватывается на самом высоком уровне в дереве домика, а затем пропускает его, а для барботажа начинается на самом низком уровне и пузырится по дереву.
Основываясь на этом понимании, я думал, что если бы я добавил слушателя событий на этапе захвата, содержимое редактируемого div отразило бы текст от до нажатие клавиши было отправлено. Если я добавлю прослушиватель событий на стадии барботирования, текстовое содержимое div будет содержать символ, который я только что напечатал.
Это не похоже на то, что: добавляет ли слушатель событий на этапе захвата или пузыря, содержимое div никогда не включает в себя последний типизированный символ.
Вот простой тест, чтобы попробовать его:
<div id="captureTest" contentEditable='true' style='height: 30px; width: 400px; border-style:solid; border-width:1px'></div>
<script type="text/javascript">
var div = document.getElementById('captureTest');
div.addEventListener("keydown", function() {alert('capture: ' + this.innerHTML)}, true);
div.addEventListener("keydown", function() {alert('bubble: ' + this.innerHTML)}, false);
</script>
Я хотел бы ожидать выход второй функции, чтобы включить новый текст в Div после вводить символ, но это не кажется, случай.
Мой вопрос: есть ли способ захватить событие нажатия клавиш из содержимого редактируемого div и получить содержимое, так как оно будет после вводится ключ? Мне нужно это для реализации функциональных возможностей типа.
Я знаю, что могу остановить событие, а затем использовать executeCommand ('insertHTML'), но это ломается при обработке исключений, обратных пространств, паст и других типов вставок, так что это не решение.
Я тестирую это в Firefox 3. Я знаю, что IE не имеет метода addEventListener.
Спасибо за любые предложения!