光标在错误的地方，在contenteditable

Question

我有不可编辑的“孤岛”。一切都运行良好，直到不可编辑的部分是可编辑div中的最后一件事。在这种情况下，光标不是在不可编辑的后面，而是在可编辑div的最后。

请参阅此示例，我借鉴了此question

以下是您可以尝试的小提琴：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

Answer 2

当contenteditable = false是

元素的最后一个子元素时，会发生这种情况。据我所知，这是webkit的错误。您始终确保“contenteditable = false”包含hidden_​​char或零宽度白色空间：

• HIDDEN_CHAR：“\ ufeff”
• ZERO_WIDTH_WHITESPACE：“”

如果你使用tinymce，你可以使用onNodeChange事件或检查delete / backspace何时发生并验证光标附近的所有“contenteditable = false”。