javascript - HTML5 contenteditable - 嵌套的不可编辑范围和光标位置行为

Question

我正在尝试在可内容编辑的 div 中围绕占位符(标签)移动光标。

如果您查看 following fiddle和截图:

使用 Chrome 将光标放在红色标签的右侧，如果我按下左箭头键，光标会上升到“some”旁边，而不是与红色标签保持在同一行，在其左侧.

Chrome 似乎是我遇到此行为的唯一浏览器。我可以监听按键事件并以某种方式控制这种行为，但这似乎有点过头而且很老套。

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

.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 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>

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