title: Fix cursor position correct with contenteditable div
body: <p>I've tried to make a simple editor box and want to add the checkbox input onto it.</p>
  
  <p>But when I add the checkbox, I found that the cursor didn't go right:</p>
  
  <p>the caret is before the checkbox I added, and it can't go right even I hit my right arrow key. Any suggest to make it more correct? (I'm using a webbrowser based on webkit, just make it correct is fine. )</p>
  
  <p>What I want to implement is <strong>when I click the mouse or use keyboard to position the content, the caret should work as normal editor(word, evernote, etc).</strong></p>
  
  <p><img src="https://i.stack.imgur.com/wBWAJ.jpg" alt="Problem"></p>
  
  <p>jsfiddler: <a href="http://jsfiddle.net/cppgohan/84CTE/9/" rel="nofollow noreferrer">http://jsfiddle.net/cppgohan/84CTE/9/</a></p>
  
  <h2>HTML:</h2>
  
  <pre><code>&lt;button id="add"&gt; AddCheckbox &lt;/button&gt;
  &lt;button id="add2"&gt; AddCheckbox2 &lt;/button&gt;
  &lt;div id="editor" contenteditable="true" width="500px" height="500"&gt;
      1. Make it work &lt;input type="checkbox"&gt;&lt;br&gt;
      2. Make it done &lt;input type="checkbox" checked&gt;
  &lt;div&gt;
  </code></pre>
  
  <h2>JS code:</h2>
  
  <pre><code>$(document).ready(function(){
      $("#add").click(function(){
          $editor = $("#editor");
          $editor.append('&lt;input type="checkbox"&gt;');
          $editor.focus();
      });
      ...
  });
  </code></pre>
  
  <h3>Hit backspace one by one, wired things happens:</h3>
  
  <p><img src="https://i.stack.imgur.com/vBKG4.gif" alt="Hit backspace one by one, wired things happens"></p>