Я имею дело с редактируемым содержимым div, и мне нужно иметь дело с захватом нажатий клавиш как до, так и после того, как персонаж был добавлен в div.
Мое понимание захвата и всплытия заключается в том, что событие сначала захватывается на самом высоком уровне дерева dom, а затем передается вниз, в то время как для всплытия оно начинается с самого низкого уровня и всплывает вверх по дереву.
Основываясь на этом понимании, я подумал, что если я добавлю прослушиватель событий на этапе захвата, содержимое редактируемого элемента 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 и получить содержимое в том виде, в котором оно будет после нажатия клавиши? Мне нужно это для реализации функциональности typehead.
Я знаю, что могу остановить событие, а затем использовать executeCommand('insertHTML'), но это не работает при обработке удалений, возвратов, вставок и других типов вставок, так что это не решение.
Я тестирую это в Firefox 3. Я знаю, что в IE нет метода addEventListener.
Спасибо за любые предложения!
