javascript - Keydown event on contenteditable div and child span -

i have contenteditable div containing span , trace keydown events when typing in both div , span within div.

everything seems work fine far in firefox in webkit browsers div keydown event seems override span event. there way fire keydown span whilst it's within div? (demo)

html:

<div id="cediv" contenteditable="true" tabindex="0" onkeydown="return fnkeydiv(event);"> put cursor/caret in contenteditable text , type characters or use arrow keys -- <span id="cespan" tabindex="0" onkeydown="return fnkeyspan(event);"> see happens when typing inside yellow text</span> -- it's not clear me : counter 2 works when click mouse inside yellow text put caret there, not when caret moved inside yellow text arrow keys .. , : counter 2 never work in webkit !? (in firefox 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; } 

i faced same problem , seems happen because div element catches keydown events, not inner span elements.

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

to make both div container , inner span catch keydown events, can wrap span in non-editable span:

<div id="cediv" contenteditable="true" tabindex="0" onkeydown="return fnkeydiv(event);">     keydown events here caught     <span contenteditable="false">         <span id="cespan" tabindex="0" onkeydown="return fnkeyspan(event);" contenteditable="true" >             keydown events here caught         </span>     </span> </div> 

edit: nevermind, still won't work while have not clicked innermost span. don't know how set focus on it.

edit: works if use dom htmlelementobject.focus() method set focus on inner span. using jquery .focus() method, triggers focus event.