title: How to set the cursor in the child of a contentEditable element?
body: <p>I want to know how to set the cursor in the child of an editable element. I have a content editable DIV with a SPAN inside and I want to set the cursor in the SPAN when the DIV is clicked to prevent someone typing in the DIV.</p>
  
  <pre><code>&lt;div class="custom-input" spellcheck="true" contenteditable="true"&gt;
    "NOT HERE"
    &lt;span data-type="text"&gt;
      "TYPE HERE"
      &lt;br&gt;
    &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried to do this with .focus() in jQuery, and it works but it just highlights the SPAN and the cursor remains in the DIV.</p>
  
  <p>I'm trying to make something like Facebook chat does. Facebook chat uses contenteditable elements for the chat input, and if you click anywhere in the chat box the cursor always is focused in a SPAN label that is used for the input.</p>