¿Eventos de teclado para elementos secundarios en un div contenteditable?

Question

Jun 23, 2009, 04:43 PM

¿Eventos de teclado para elementos secundarios en un div contenteditable?

Tengo un div que la propiedad que se puede contentar se ha establecido en true. ¿Cómo puedo hacer que los niños respondan a los eventos del teclado? Parece que la única forma es capturar los eventos en el div padre y descubrir al niño a través de la selección de apis. ¿Hay alguna manera mejor? Más específicamente, ¿puedo adjuntar un controlador de eventos de teclado a elementos secundarios? ¿Me estoy perdiendo de algo?

Se adjunta un código de ejemplo que ilustra el problema. Espero que los comentarios en el código sean suficientemente explicativos.

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