如何在两个div之间的contenteditable div中设置插入/光标位置。

考虑下面的contenteditable div。

<div contenteditable="true">
<div>bold text</div><div>bold text</div>
</div>

如果我将光标放在两个div之间并开始输入，则粗体文本会变粗，而不是在两个div之间插入新的文本节点。 如果你打回家并尝试在第一个div前输入内容，也会发生同样的情况。 它成为第一个div的一部分。

如果我检查从选择区域返回的范围的startContainer，我会按照我的预期获取其中一个div的内容，而不是空的文本节点。

看到这个http://jsfiddle.net/9ZZpX/3/

问题是为什么会发生这种情况？ 我如何选择div之间的位置，以便在输入内容时不会加粗？ （很明显，我可以添加一个空间，并且可以解决这个问题，但这非常难看。）

如果您在状态更新框中输入了一个@mention，然后按HOME，则可以在Facebook上看到此功能正常工作。 如果您输入的文字不会突出显示。

我能想到的唯一事情是拦截按键并以编程方式插入文本节点，但这看起来很难看。

我疯狂搜索，找不到任何引用，记录这如何真的应该工作。 显然有一些我不明白的地方，而且这方面的文档确实很少。

（我希望能够做的也是在光标即将进入其中一个div并跳过时检测到，如果两个div彼此相邻，则光标跳转到其中一个div并且它将作品分开。）

有关我想要做什么的更多信息：http://a-software-guy.com/2012/12/the-horrors-of-cursor-positioning-in-contenteditable-divs/

---

浏览器在这方面不一致。 Firefox会让你把插入的位置放在比大多数浏览器更多的位置上，但是WebKit和IE都有关于有效插入位置的明确想法，并且会修改你添加到选择的范围以符合最近的有效位置。 这确实是有道理的：具有不同的文档位置并因此针对相同的视觉插页位置的行为对于用户而言是混淆的。 但是，这是以开发人员不灵活为代价的。

这在任何地方都没有记录。 目前的选择规范没有提到这一点，主要是因为浏览器实现了他们的选择API时没有规范存在，并且当前规范没有统一的文档记录。

一种选择是按照您的建议拦截keypress事件，但当用户使用编辑或上下文菜单粘贴内容时，这将无济于事。 另一种方法是使用鼠标和键盘事件记录选择内容，创建具有零宽度空格字符的元素，以便在必要时将插入符号放入并放置在一个元素中。 正如你所说，丑陋。

---

我的回答只是Tim的一个补充，这是一个全面的。

AFAIK Facebook不使用可编辑的内容。 状态框由一个简单的textarea和div底层构成，它们在其上呈现蓝色背景以便刻划。

虽然，即使他们这样做，情况也会不一样，因为nick会是内联元素，幸运的是内联元素的情况更简单:)。

关于在不可访问的地方定位插入符号 - 在CKEditor中，我们遇到了同样的问题。 有很多地方用户不能移动插入符号。 我们决定用名为Magic-line的插件来解决这个问题。 正如您在演示中看到的，我们完全绕过了选择问题，我认为这是解决此问题的最佳方法。 这是非常有用的，在CKEditor 4.0.1中它将会（并且已经在master上）也可以通过按键完全访问。

---

你可以做的另一件事是使用突变观察器捕捉突变，然后在事实之后修复它们。 在我的用例中，我很幸运，每个元素都有预定义的文本。 当突变观察者触发时，我只是简单地将更改的文本移动到元素之前或之后的新文本节点。 这似乎比其他选项容易得多，因为观察者会触发字符数据的所有更改，并且它也具有所有更改的正确记录，与按键事件不同。

链接地址: http://www.djcxy.com/p/92483.html

上一篇: How to set caret/cursor position in a contenteditable div between two divs.

下一篇: Set cursor after span element inside contenteditable div