События клавиатуры для дочерних элементов в contenteditable div? - PullRequest
Новая
       25

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

5 голосов
/ 23 июня 2009

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

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

<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>

1 Ответ

3 голосов
/ 18 августа 2009

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

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

...