Geek Answers Handbook

Keyboard events for children in content div?

I have a div whose contenteditable property is set to true. How can I get kids to respond to keyboard events? It seems that the only way is to capture the events in the parent div and define the child using the selection apis. Is there a better way? In particular, can I connect a keyboard event handler to child elements? Did I miss something?

Attached example code that illustrates the problem. We hope that the comments in the code are quite explanatory.

<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>
+5
source share
1 answer

, divs . div , tabindex . tabindex , , -, IE. target/srcElement Event, keypress div, IE div, .

, , , - , , , .

+3

More articles:


All Articles