2

I have a contenteditable div containing a span and would like to trace the keydown events when typing in both the div itself and the span within the div.

Everything seems to work fine so far in firefox but in webkit browsers the div keydown event seems to override the span event. Is there a way to fire the keydown even for the span whilst it's within the div? (Demo)

HTML:

<div id="ceDiv" contenteditable="true" tabindex="0" onkeydown="return fnKeyDiv(event);">
put your cursor/caret in this contenteditable text and type some characters
or use the arrow keys
-- <span id="ceSpan" tabindex="0" onkeydown="return fnKeySpan(event);">
see what happens when typing inside this yellow text</span>
-- it's not clear to me : counter 2 only works when you click the mouse
inside the yellow text to put the caret there, not when the caret is moved inside
the yellow text by the arrow keys ..
AND : counter 2 does never work in WebKit !? (in FireFox it does)
</div>
<hr />
<span id="ST1" class="ST"></span> : counter 1 : typing in total text<br />
<span id="ST2" class="ST"></span> : counter 2 : typing in yellow "mytext"

JS:

var count = 0;
function fnKeyDiv(e) {
    count++;
    document.getElementById('ST1').innerHTML = count;
    return true;
}
function fnKeySpan(e) {
    count++;
    document.getElementById('ST2').innerHTML = count;
    return true;
}
bjb568
  • 11,089
  • 11
  • 50
  • 71
Roelof Berkepeis
  • 165
  • 1
  • 12
  • Hi Roelof - I don't know the solution to this but I suggest you phrase the question more like this: I have a contenteditable div containing a span and would like to trace the keydown events when typing in both the div itself and the span within the div. Everything seems to work fine so far in firefox but in webkit browsers the div keydown event seems to override the span event. Is there a way to fire the keydown even for the span whilst it's within the div? DEMO: http://jsfiddle.net/foleox/88Pz9/18/ – Ryan King Apr 07 '14 at 01:12
  • Only elements that can receive focus (such as inputs and contenteditable elements) fire key events. This does not include elements within contenteditable elements. See comments on [this answer](http://stackoverflow.com/a/18772205/96100), for example. You can get the current element from the selection object anyway (`window.getSelection().anchorNode` will get you started, although it may be a text node). – Tim Down Apr 07 '14 at 08:49
  • Thanks for the reactions. The link Tim gave ("this answer") contains good info about my subject, and this page also has more links to SO-questions which are relevant! – Roelof Berkepeis Apr 07 '14 at 12:02

1 Answers1

4

I faced the same problem and it seems to happen because it is the div element that catches the keydown events, not the inner span elements.

To make them catch the keydown events, you would need to set contenteditable=true for each of them while setting contenteditable=false for the div container.

To make both the div container AND the inner span catch the keydown events, you can wrap your span in a non-editable span:

<div id="ceDiv" contenteditable="true" tabindex="0" onkeydown="return fnKeyDiv(event);">
    keydown events here are caught
    <span contenteditable="false">
        <span id="ceSpan" tabindex="0" onkeydown="return fnKeySpan(event);" contenteditable="true" >
            keydown events here are caught too
        </span>
    </span>
</div>

EDIT: nevermind, it still won't work while you have not clicked the innermost span. I don't know how to set the focus on it.

EDIT: It works if you use the DOM HTMLElementObject.focus() method to set the focus on your inner span. I was using the jQuery .focus() method, that only triggers the focus event.

Eliott
  • 43
  • 3