Eventos de teclado para elementos filho em uma div de conteúdo editável?
Eu tenho uma div que é a propriedade contenteditable definida como true.Como faço para que as crianças respondam a eventos de teclado? Parece que a única maneira é capturar os eventos no div pai e descobrir o filho por meio da seleção apis. Existe uma maneira melhor? Mais especificamente, posso anexar um manipulador de eventos de teclado a elementos filho? Estou esquecendo de algo?
Anexado é código de exemplo que ilustra o problema. Espero que os comentários no código sejam 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>