Eventos de teclado para elementos secundarios en un div satisfactorio?

Tengo un div cuya propiedad contenteditable se ha establecido en verdadero. ¿Cómo hago que los niños respondan a los eventos de teclado? Parece que la única forma es capturar los eventos en el div principal y descubrir al niño a través de las API de selección. ¿Hay una mejor manera? Más específicamente, ¿puedo adjuntar un controlador de eventos de teclado a elementos secundarios? ¿Me estoy perdiendo de algo?Eventos de teclado para elementos secundarios en un div satisfactorio?

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

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

Fuente

2009-06-23 vkd

Esto se debe a que los tramos regulares y divs son incapaces de recibir el foco. Puede hacer un tramo normal o enfocable div agregando un atributo tabindex a la etiqueta, o haciéndola editable. No desea un tabindex en el tramo de niños porque esto parece impedir que sea editable en IE. Iba a sugerir examinar las propiedades target/srcElement del objeto Event pasado al controlador keypress para todo el div, pero en IE esto solo le da una referencia al mismo div en lugar del espacio para niños.

Así que, en respuesta a su pregunta, no creo que haya una mejor solución entre navegadores que usar la selección para verificar dónde se escribió el carácter.

Fuente

2009-08-18 15:09:15

Eventos de teclado para elementos secundarios en un div satisfactorio?

Respuesta

Cuestiones relacionadas