游标在错误的地方在contenteditable [英] Cursor in wrong place in contenteditable

问题描述

我有contenteditable div与不可编辑的岛。一切都运作良好，直到不可编辑的部分是可编辑的div的最后一件事。

I have contenteditable div with non-editable "islands". Everything is working well until non-editable part is the last thing in editable div. In that case cursor is not right behind non-editable but at the very end of editable div.

看到这个例子我借用了查询

See this example I borrowed from this question

这里是小提琴，你可以试试： http://jsfiddle.net/RYsvZ/2/
。当你删除点在结束，光标跳开。这个行为是safari和chrome。我想这是webkit的问题。

Here is fiddle you can try on: http://jsfiddle.net/RYsvZ/2/ . When you delete dot at the end, cursor jump away. This behaviour is with safari and chrome. I guess it is webkit issue.

这里是代码示例：

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

你有什么想法为什么会发生，以及如何解决？

Do you have any idea why it is happening and how to fix it?

推荐答案

我现在解决了我的问题，也许你也可以接受。

I have now fixed my problem, maybe it will be acceptable for you too.

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

问题是由于插入符号没有空格，所以如果你wraped contenteditable div零宽度非连接空间，它给出了去除某处的插入符号。

The problem is caused by the caret having no space to go into so if you wrap your contenteditable divs in zero width non joining spaces it gives the caret somewhere to go.

jsfiddle

这篇关于游标在错误的地方在contenteditable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！