Вопрос по – События клавиатуры для дочерних элементов в contenteditable div?

5

У меня есть div, для которого свойство contenteditable установлено в true. Как заставить детей отвечать на события клавиатуры? Похоже, единственный способ - захватить события в родительском элементе div и определить дочерний элемент с помощью API выбора. Есть ли способ лучше? В частности, можно ли прикрепить обработчик событий клавиатуры к дочерним элементам? Я что-то пропустил

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

<code><HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>

<BODY>
<div id="editable" contentEditable='true' style='height: 130px; width: 400px; border-style:solid; border-width:1px'>
    <span id="span1" onkeypress="alert('span1 keypress')">test text 1</span> <!-- does not work -->
    <span id="span2" > test text2</span>
    <span id="span3" onclick="alert('span3 clicked')">test text 3</span>  <!-- this works fine -->
</div>
<!-- Uncomment this to set a keypress handler for span2 programatically. still doesnt work -->
<!--
<script type="text/javascript">
    var span2 = document.getElementById('span2');
    span2.onkeypress=function() {alert('keypressed on ='+this.id)};
</script>
-->

<!-- Uncomment this to enable keyboard events for the whole div. Finding the actual child that the event is happening on requires using the selection api -->
<!--
<script type="text/javascript">
    var editable = document.getElementById('editable');
    editable.onkeypress=function() {alert('key pressed on ='+this.id+';selnode='+getSelection().anchorNode.parentNode.id+',offset='+getSelection().getRangeAt(0).startOffset)};
</script>
-->
</BODY>
</HTML>
</code>

Ваш Ответ

1   ответ
3

что регулярные пролеты и деления не способны получить фокус. Вы можете сделать нормальный фокус или div фокусируемым, добавивtabindex приписать тегу или сделать его редактируемым. Вы не хотитеtabindex на дочернем промежутке, потому что это, кажется, мешает редактированию в IE. Я собирался предложить изучитьtarget / srcElement свойстваEvent объект передан вkeypress обработчик для всего div, но в IE это дает только ссылку на тот же div, а не на дочерний span.

Так что, отвечая на ваш вопрос, я не верю, что есть лучшее кросс-браузерное решение, чем использование выбора для проверки того, где был введен символ.

Похожие вопросы