javascript - HTML5 contenteditable - nested non editable spans and cursor position behavior -

i'm trying move cursor around placeholders (tags) within contenteditable div.

if @ following fiddle , screenshot:

using chrome placing cursor on right side of red tag, if push left arrow key cursor goes right next "some" instead of staying in same line red tag, on left side.

chrome seems browser i'm experiencing behavior. listen key down events , somehow control behavior, seems on top , quite hacky.

is there reasonable explanation , possible smooth workaround?

.red {    background-color: red;  }  .orange {    background-color: orange;  }  .id {    color: white;  }

<pre>  <div dir="ltr" class="contenteditable" contenteditable="true">some<br><placeholder class="red" contenteditable="false" unselectable="on"><span class="id">id</span> tag</placeholder> <placeholder class="orange" contenteditable="false" unselectable="on"><span class="id">id</span> tag</placeholder> text  </div>  </pre>    <p>  instructions:<br>  put cursor on right hand side of orange tag.<br>  if move cursor left notice 2 unwanted behaviors:<br>  1: cursor invisible inbetween tags<br>  2: when cursor placed on right side of red tag, if move left, go directly right next "some". expected on left side of red tag.<br>  </p>

this tricky. best came is: https://jsfiddle.net/7u4o99o9/1/

.tag {     display: inline-block;     padding: 5px 5px; }  .tag-body {     padding: 3px;     border-radius: 4px; }  .red .tag-body {     background-color: red; } .orange .tag-body {     background-color: orange; }  .id {     color: white; } 

another option use ready-made library such as: http://xoxco.com/projects/code/tagsinput/example.html