如何查找文本插入符/光标的 X 和 Y 位置

Question

我想将弹出元素直接放置在文本区域或内容可编辑元素中的文本插入符/闪烁文本光标下方。

我找到了答案，为我提供了插入符号所在元素内的文本索引，但据我所知，这对我来说毫无用处。（像这样）

我需要与鼠标事件可用的 event.pageX 和 pageY 属性类似的东西，但我希望文本编辑器插入符的位置也有同样的东西。有人知道怎么做吗？

Answer 1

您无法轻松获得文本插入符的确切坐标，但此代码片段将为您提供一个具有rect窗口当前选择的近似坐标的对象。您可能还需要根据您的样式添加/减去包含元素的额外偏移量。

const selection = window.getSelection();
const range = selection.getRangeAt(0);
rect = range.getBoundingClientRect();

注意：input这在我熟悉textarea的浏览器中不起作用