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/

回答1:

Because the span1 is not a contenteditable so it will not fire any event.

You can set contenteditable on child too, but it will not fired because the wrapping contenteditable div editor catch the events before the inner span, so they are not fired on the child span1.

So you can change your code in:

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

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

Demo: http://jsfiddle.net/IrvinDominin/U8wnK/

Side note: I think it's better to explicit the boolean value of contenteditable in your markup

回答2:

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.

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

来源：https://stackoverflow.com/questions/18836477/onkeyup-onkeydown-events-not-firing-for-span-element

标签

javascript

event-handling

html