google-chrome - 光标在 contenteditable 中的错误位置

Question

我有可编辑的 div 和不可编辑的“岛屿”。一切正常，直到不可编辑部分成为可编辑 div 中的最后一件事。在这种情况下，光标不在不可编辑的后面，而是在可编辑 div 的最后。

看这个例子，我从这个 question 借来的

这是您可以尝试的 fiddle :http://jsfiddle.net/RYsvZ/2/
.当您删除末尾的点时，光标会跳开。这种行为适用于 safari 和 chrome。我猜是 webkit 问题。

这是代码示例:

<div contenteditable="true" class="editor">
Sample template with <span class="mergecode" contenteditable="false">MergeCode1</span>.
</div>

您知道为什么会发生这种情况以及如何解决吗？

Answer 1

&zwnj;<button contenteditable=false>press</button>&zwnj;

问题是由插入符号没有空间进入引起的，因此如果您将 contenteditable div 包装在零宽度非连接空间中，它会给插入符号某个地方。

jsfiddle