Caret 的实际 DOM 位置而不是文本位置

Question

我无法找到这个问题的答案。我的一个用例是在 contenteditable 的当前插入符号位置下方显示一个小弹出窗口。我需要找到插入符号的位置（DOM 位置），然后才能正确显示此弹出窗口。

我所做的所有搜索通常最终都试图找到插入符号的文本位置，而不是相对于 DOM 的实际 XY。如何实现？

编辑：组件的 textarea-caret-position 插件没有帮助，因为它看起来像一个专门用于输入和 textarea 的插件。我需要一些内容可编辑的东西。

Answer 1

在了解了 Component 的 textarea-caret-position 之后，我能够克服这个问题。我在这里所做的只是在当前插入符号位置插入一个临时节点，然后获取该节点的坐标（在插入符号的位置）。收到坐标后，移除临时节点。

var selection = this.document.getSelection();
var node = selection.anchorNode;
var domNode = node.nodeType === 3 ? node.parentNode : node;

var tempDomNode = $("<span class='caret'></span>");
var tempNode = tempDomNode[0];

domNode.appendChild(tempNode);
var left = tempDomNode.offset().left;
var top = tempDomNode.offset().top;
domNode.removeChild(tempNode);

“left”和“top”现在应该包含插入符号的位置。