将插入符号的值设置到某个位置后不能得到插入符号位置值

Question

在我的项目中，我使用的是“contenteditable”div。我正在尝试使用此div来创建自动完成功能。无论何时我输入任何单词，都应在不同的div中看到一些建议。当我按ENTER时，所选建议应替换为“contenteditable”div中输入的文字。然后当我按SPACE时，应该可以看到更多的建议。

有关更清晰的解释，请参阅此fiddle。

在小提琴中，键入一些字母，然后按ENTER，然后SPACE。

每当我按SPACE，都会显示一个警告框（用于测试）。这告诉插入符号在“contenteditable”div的当前位置。

但是，当我按ENTER，然后SPACE，脱字符的当前位置是错误的，即0。

据我所知，如果我不使用placeCaretAtEnd()函数，那么我正确地得到插入位置。但在我的情况下，我想同时使用（getCaretPosition()和placeCaretAtEnd()）。

我正在使用Firefox进行检查。 （在Chrome中，它似乎工作正常）

我需要一个适用于IE8 +，Chrome和Firefox的解决方案。请帮忙。

Answer 1

您需要一种更复杂的方式来获取与可编辑div中的所有文本配合使用的插入位置。您可以使用this question中的代码，但我不太确定您想要实现的目标。您可能会遇到问题，因为代码没有考虑到<br>暗示的lin中断和块元素。

演示：http://jsfiddle.net/BN5N6/12/

Answer 2

对不起，我不能给你一个完整的答案。我只会将此作为评论发布，但我没有评论权限。在玩过你的小提琴之后，我注意到在按下Enter后，在Firefox（仅限我测试过的浏览器）中，“结果”div会有一个额外的子文本节点。这不是你的placeCaretAtEnd函数的结果。这似乎是Firefox在您输入时为您做的事情。

它看起来像在控制台中得到的0是插入符在浏览器为您创建的新文本节点中的位置。如果在按下输入键后，您单击原始文本节点并按空格键，控制台将为您提供正确的插入位置（再次，相对于光标所在的文本节点）。