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

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

HTML5 contenteditable - nested non editable spans and cursor position behavior

html

javascript

css

contenteditable