Contenteditable Div - 根据 innerHTML 位置的光标位置

Posted 2023-05-07

【中文标题】Contenteditable Div - 根据 innerHTML 位置的光标位置

【英文标题】：Contenteditable Div - Cursor position in terms of innerHTML position

【发布时间】：2015-05-29 05:28:11

【问题描述】：

我已经完成了我的研究，并在 *** 上遇到了这些问题，人们问了同样的问题，但问题是他们想根据 x 和 y 坐标或左侧的列来获取位置。我想知道光标相对于 div 的 innerhtml 的位置。

例如：

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

所以这个案例我想要的结果是44。怎么办？

【问题讨论】：

你能定义“想知道光标相对于div的innerHTML的位置是什么”吗？为什么应该是 44？

对不起！脑功能障碍。我编辑了帖子。 @FrancescoE。

我看到你接受了一个答案，所以它已经解决了，不是吗？

你为什么要这个？它本质上是没有意义的：元素内容没有单一的 HTML 表示。

【参考方案1】：

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()合并连续的文本节点。

【讨论】：

当我点击删除按钮时，这会产生一些不希望的副作用。好像我在使用它时并没有删除我想要的角色。