Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

onkeyup, onkeydown events not firing for SPAN element

I've defined the following two span elements: 1) element inside a contenteditable div. 2) contenteditable element.

So far, I can't get the onkey events to fire for my first case (). For the second one () which is not inside a contenteditable div, these events fire fine.

Does anybody knows why?

Here's the example code:

<div id='editor' contenteditable>
div contents...
<span id='span1' style="background-color:red"  onkeyup='alert("span1 keyup");' onkeypress='alert("span1 keypress");' onkeydown='alert("span1 keydown");'>Hello</span>
</div>

<span contenteditable id='span2' style="background-color:yellow" onkeyup='alert("span2 keyup");' onkeypress='alert("span2 keypress");' onkeydown='alert("span2 keydown");'>World</span>

http://jsfiddle.net/nr9HG/

like image 261
Aнгел Avatar asked Aug 31 '25 03:08

Aнгел


1 Answers

I had the same problem and it seems to work if you put your editable span inside another non-editable span :

<div id="editor" contenteditable="true">div contents...
    <span contenteditable="false>
        <span id='span1' contenteditable="true" style="background-color:red"  onkeyup='alert("span1 keyup");' onkeypress='alert("span1 keypress");' onkeydown='alert("span1 keydown");'>Hello</span>
    </span>
</div>

You will be able to catch keydown/keyup events both on the editor div AND in your span1.

You need the inner span to have the focus to catch keydown events coming from it. Use the DOM method .focus() to do so.

like image 87
Eliott Avatar answered Sep 02 '25 18:09

Eliott