为什么我的可疑光标在Chrome中跳到最后？

Question

脚本

我有一个令人满意的<div>区域,在这个区域内我可能有一些<span contenteditable="false"></span>包含一些文字.我们的想法是,这些span元素将表示无法编辑的样式文本,但可以<div contenteditable="true"></div>通过按退格键从区域中删除.

问题

将光标放置在这里的大问题.如果你删除其中一个<span>元素,光标会跳到结尾<div>.更有趣的是,如果你在光标"结束时"输入一些文字,那么文本放置就好了...然后,如果删除新输入的文本,光标会跳回来!

我准备了一个小提琴来证明这一点.我需要这个只能在Chrome中使用,而其他浏览器现在要么不关心,要么有适当的解决方法.(另请注意,准备好的小提琴只是为了在Chrome中展示这一点).

小提琴

---

小提琴说明: Chrome版本39.0.2171.95米(64位)也以32位再现

1. 点击进入<div>区域
2. 输入"123"
3. 退格键"3"退格键"2"退格键"1"

---

相关细节

对此进行了广泛的研究,我遇到了类似的各种SO问题,但借用相关解决方案并未证明是我所追求的银弹.我还发现Chrome项目的问题似乎针对上述问题(可能不是以确切的方式),可以在下面查看.

1. 问题384357:在具有不可编辑节点的可信区域内的插入位置
2. 问题385003:当到达contenteditable元素中的行尾时插入插入符样式是错误的
3. 问题71598:在contentEditable结尾处的不可编辑元素之后处于错误位置的插入符号

我发现的最接近的SO解决方案可以在这里.这个解决方案的想法是‌在<span>元素之后放置字符,但如果我现在要删除我<span>,我会删除‌...强制我的光标跳到最后,提供一个奇怪的UI体验,不删除我的<span>"我的"初始删除键击."

题

有没有人遇到过这个问题并找到了解决方法？我欢迎任何可能的解决方案,即使JS他们来的时候也很讨厌.我已经开始了解到杠杆作用contenteditable还有一个挣扎的清单,但这似乎是我目前最后的困难.

Answer 1

我不知道为什么会这样,但我觉得它与尺寸有关<div>,所以我试着玩这个display属性.在设置inline-block并使用文本稍微播放之后,我发现在我对其进行一些编辑后,问题就消失了,特别是添加了一个新行.

我看到,由于某种原因,<br/>标签div.main在我删除新行后保留,但是它的外观<div>和它对箭头键的响应方式与其中没有新行相同.

所以我重新启动了CSS改变和<br/>标签div.main和中提琴的小提琴!

总结如下:

1. 添加display: inline-block到div.main
2. <br/>在最后添加一个div.main

JSFiddle链接

Answer 2

问题是您的contenteditable元素是 a div，默认情况下是display: block。这就是导致您的插入符位置问题的原因。可以通过使最外层div不可编辑并添加一个新的可编辑（div将被视为inline-block.

新的 HTML 将div在外部 HTML 中添加一个新内容（并在末尾添加相应的结束标记）：

<div id="main" class="main"><div id="editable" contenteditable="true">...

并将其添加到您的 CSS 中：

div#editable {
    display: inline-block;
}

为了在span元素之间更好地看到插入符号，我还在 CSS 中添加了margin: 2px规则div.main span ，但这对于防止问题中报告的插入符号跳跃问题不是必需的。

这是一把小提琴。

正如您开始发现的那样，contenteditable不同浏览器的处理方式不一致。几年前，我开始从事一个项目（浏览器内 XML 编辑器），我认为这个项目contenteditable会让一切变得更容易。contenteditable然后，当我开发该应用程序时，我很快发现自己接管了我认为免费提供给我的功能。今天，唯一contenteditable给我的就是它在我想要编辑的元素上打开键盘事件。其他一切，包括插入符移动和插入符显示，都由自定义代码管理。