title: contenteditable with nested span. Who has the focus?
body: <p>This <a href="https://stackoverflow.com/q/33540051/841108">question</a> (to which I added a bounty) is related and gives the context and motivations (my GPLv3 <a href="https://github.com/bstarynk/melt-monitor-2015" rel="nofollow noreferrer">MELT monitor</a> on github; I added at last some README to it). </p>
  
  <p>I am only interested in <em>recent</em> HTML5 compliant browsers (on GNU/Linux), e.g. Firefox 38 at least (and preferably 42) or Chrome 46 (on Debian/Sid desktop, x86-64)</p>
  
  <p>So, suppose I have in my HTML5 page</p>
  
  <pre><code>&lt;div id='myeditdiv' contenteditable='true'&gt;
    &lt;span class='foo_cl'&gt;FOO&lt;span class='bar_cl'&gt;bar&lt;/span&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><sup>(actually the HTML is generated, and so is the DOM; I'm currently generating on the server side some javascript which constructs the DOM; of course I can change the generators!)</sup></p>
  
  <p>And I am clicking so that the focus come between the two <code>OO</code>. How can I get the DOM element of <code>foo_cl</code>, preferably with Jquery.</p>
  
  <p>Same question when focusing between <code>ar</code>. I want the <code>bar_cl</code> span.</p>
  
  <p>Of course, <code>$(':focus')</code> don't work. It gives the <code>div</code></p>
  
  <p>FWIW, it is commit <a href="https://github.com/bstarynk/melt-monitor-2015/commit/9109ae5b3d168f16bd78d170079c6594e4d3f32e" rel="nofollow noreferrer">9109ae5b3d168f1</a> of the MELT monitor.</p>
  
  <p>PS. See my (november 26<sup>th</sup> 2015) addenda to <a href="https://stackoverflow.com/q/33540051/841108">this question</a>. Probably <code>contenteditable</code> is not useful to me, but <code>tabindex</code> surely is useful!</p>