title: Set Cursor position after nested contentEditable
body: <p>I've got this markup</p>
  
  <pre><code>&lt;div contentEditable="true"&gt;
      Some other editable content
      &lt;div class="field" contentEditable="false"&gt;
          &lt;span class="label"&gt;This is the label&lt;/span&gt;
          &lt;span class="value" contentEditable="true"&gt;This is where the caret is&lt;/span&gt;
      &lt;/div&gt;
      &lt;!-- This is where I want the Caret --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The caret is currently in the <code>.field</code> span.</p>
  
  <p>I need to move it back out <strong>after</strong> the <code>.field</code> in the parent <code>contentEditable</code>.</p>
  
  <p><img src="https://i.stack.imgur.com/tW9FH.png" alt="Example"></p>
  
  <p>How can this be accomplished via javascript (with the use of jQuery if needed) ?</p>
  
  <p>It will be trying to trigger it on a keydown event when the caret is in the .value span as shown.</p>