title: Why Is My Contenteditable caret Jumping to the End in Chrome?
body: <h2>Scenario</h2>
  
  <p>I have a contenteditable <code>&lt;div&gt;</code> area, and within this area I may have some <code>&lt;span contenteditable="false"&gt;&lt;/span&gt;</code> containing some text. The idea is, these span elements will represent styled text that can not be edited, but may be deleted from the <code>&lt;div contenteditable="true"&gt;&lt;/div&gt;</code> area by pressing the backspace key.</p>
  
  <h2>Issue</h2>
  
  <p>The <strong>cursor placement</strong> is the big issue here. if you delete one of these <code>&lt;span&gt;</code> elements, the cursor jumps to the end of the <code>&lt;div&gt;</code>. More interesting, if you type some text while the cursor is "at the end," the text placement is just fine... Then, if you delete the newly typed text, the cursor jumps back!</p>
  
  <p>I have prepared a fiddle which will demonstrate this. <strong>I need this to work only in Chrome</strong>, and other browsers are either of non-concern for now or have workarounds in place. <em>(Also note the prepared Fiddle is crafted to demonstrate this in Chrome only).</em>
  <br /><br />
  <a href="http://jsfiddle.net/41mo9xxd/5/" rel="noreferrer"><strong>Fiddle</strong></a> <br /></p>
  
  <hr>
  
  <p><strong>Fiddle Instruction:</strong> Chrome Version 39.0.2171.95 m (64-bit) <em>reproduced in 32-bit as well</em></p>
  
  <ol>
  <li>Click into <code>&lt;div&gt;</code> area</li>
  <li>Type "123"</li>
  <li>Backspace "3" Backspace "2" Backspace "1"
  <img src="https://i.stack.imgur.com/WTtcj.png" alt="enter image description here"></li>
  </ol>
  
  <hr>
  
  <h2>Related Details</h2>
  
  <p>Researching this extensively, I have come across various SO question that are similar, but borrowing the associated solutions has not proved to be the silver bullet I am after. I have also found issues for the Chrome project which seem to target (perhaps not in the exact manner) the issue described above, and can be viewed below.</p>
  
  <ol>
  <li><a href="https://code.google.com/p/chromium/issues/detail?id=384357" rel="noreferrer">Issue 384357:  Caret position inside contenteditable region with uneditable nodes</a></li>
  <li><a href="https://code.google.com/p/chromium/issues/detail?id=385003" rel="noreferrer">Issue 385003:  Insert caret style is wrong when reaching the end of a line in a contenteditable element</a></li>
  <li><a href="https://code.google.com/p/chromium/issues/detail?id=71598" rel="noreferrer">Issue 71598:   Caret in wrong position after non-editable element at the end of contentEditable</a></li>
  </ol>
  
  <p>The closest SO solution I have found can be <a href="https://stackoverflow.com/questions/18985261/cursor-in-wrong-place-in-contenteditable/21723374#21723374">here</a>. The idea in this solution is to place <code>&amp;zwnj;</code> characters after the <code>&lt;span&gt;</code> elements, but if I want to now delete my <code>&lt;span&gt;</code>, I instead delete the <code>&amp;zwnj;</code>... forcing my cursor to jump to the end, offering a weird UI experience by not deleting my <code>&lt;span&gt;</code> on my "initial delete key stroke."</p>
  
  <h2>Question</h2>
  
  <p>Has anyone experienced this issue and found a work around? I welcome any possible solution, even as JS hacky as they come. I've come to learn that leveraging <code>contenteditable</code> comes with a laundry list of struggle, but this seems to be the last remaining difficulty I <em>currently</em> have.</p>