内容可编辑分区-根据内部HTML位置的光标位置

Contenteditable Div - Cursor position in terms of innerHTML position

本文关键字：位置 HTML 内部 光标 -根 编辑 分区      更新时间：2023-09-26

我已经做了研究，在StackOverflow上遇到了这些问题，人们问了同样的问题，但问题是他们想从左边得到x和y坐标或列的位置。我想知道相对于div的innerHTML，光标的位置是什么。

例如：

innerHTML = "This is the innerHTML of the <b>div</b> and bla bla bla..."
                                                        ^
                                                  Cursor is here

所以我想要的结果是44。怎么做？

var target = document.createTextNode("'u0001");
document.getSelection().getRangeAt(0).insertNode(target);
var position = contentEditableDiv.innerHTML.indexOf("'u0001");
target.parentNode.removeChild(target);

这会临时插入一个包含不可打印字符（'u0001）的伪文本节点，然后在div的innerHTML中查找该字符的索引。

在大多数情况下，这会使DOM和当前选择保持不变，并可能产生一个较小的副作用：如果光标位于单个文本节点的文本中间，则该节点将被分解为两个连续的文本节点。通常情况下，这应该是无害的，但在特定应用程序的上下文中要记住这一点。

更新：原来您可以使用Node.normalize()合并连续的文本节点。

相关文章：