onkeyup, onkeydown events not firing for SPAN element

Question

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

Answer 1

You could try using the new window.getSelection() API through which you could access the leaf-most node that is part of your current selection. I.e:

<div contenteditable onkeyup="getTarget">
   <span id="1">One</span>
   <span id="2">Two</span>
</div>

JS:

function getTarget(ev) {
   const selection = window.getSelection();
   // assuming your cursor is over "One"
   console.log(selection.baseNode.parentNode) // <span id="1"></span>
}

May or may not meet your requirements.

Answer 2

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

Answer 3

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.