HTML5 contenteditable - 嵌套的不可编辑跨度和光标位置行为

Question

我尝试在一个可信的div中围绕占位符（标记）移动光标。

如果您查看following fiddle和屏幕截图：

使用Chrome将光标放在RED标签的右侧，如果我按下左箭头键，光标会在＆＃34;某些＆＃34;旁边向上移动。而不是与RED标签保持在同一条线的左侧。

Chrome似乎是我遇到此行为的唯一浏览器。 我可以听取关键事件，并以某种方式控制这种行为，但这似乎超过顶部而且非常hacky。

对此有合理的解释以及可能的顺利解决方法吗？

＆＃13;

＆＃13;

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

＆＃13;

<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 the cursor on the right hand side of the orange tag.<br>
If you move the cursor to the left you will notice 2 unwanted behaviors:<br>
1: the cursor is invisible inbetween the TAGs<br>
2: when the cursor is placed on the right side of the red tag, if you move to the left, it will go directly up right next to "some". The expected would be on the left side of the red tag.<br>
</p>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这很棘手。我想出的最好的是：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;
}

另一种选择是使用现成的库，例如：http://xoxco.com/projects/code/tagsinput/example.html