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

Question

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

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

这是代码示例：

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

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

score 12 · Accepted Answer

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

问题是由于插入符号没有空间进入，所以如果你将你的 contenteditable div 包装在零宽度的非连接空间中，它会给插入符号一个可以去的地方。

score 2 · Accepted Answer

当 contenteditable=false 是

元素。据我所知，这是 webkit 错误。您始终确保“contenteditable=false”被包裹一个 hidden_char 或零宽度空白：

如果您使用 tinymce，则可以使用 onNodeChange 事件或检查何时发生删除/退格并验证光标附近的所有“contenteditable=false”。

2 回答 2