Tastaturereignisse für untergeordnete Elemente in einem inhaltsbearbeitbaren Div?

Question

Jun 23, 2009, 04:43 PM

Tastaturereignisse für untergeordnete Elemente in einem inhaltsbearbeitbaren Div?

Ich habe ein div, dessen contenteditable -Eigenschaft auf true festgelegt wurde. Wie bringe ich die Kinder dazu, auf Tastaturereignisse zu reagieren? Der einzige Weg scheint zu sein, die Ereignisse in der Eltern-Div zu erfassen und das Kind über die Auswahl-API herauszufinden. Gibt es einen besseren Weg? Kann ich einen Tastaturereignishandler an untergeordnete Elemente anhängen? Vermisse ich etwas?

Im Anhang befindet sich ein Beispielcode, der das Problem veranschaulicht. Hoffe, die Kommentare im Code sind ausreichend erklärend.

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