我可以在 ContentEditable 中找到光标的像素位置吗？

Question

我的意思是找到光标的顶部/左侧像素位置，而不是字符偏移。

我想这样做的原因是因为我想在光标旁边显示一个类似于工具提示的小 div（想想较新的 MS Word 的浮动格式框），在您键入或单击时跟随光标。如果用户单击，我可以使用鼠标坐标，但不确定如何输入。

有可靠的方法吗？如果不是为了找到光标的顶部/左侧位置，那么另一种方法是找到line的顶部位置。

示例代码不是 100% 必要的，只要该方法有效并且解释清楚即可。

Answer 1

尝试这个

var cursorY = window.getSelection().getRangeAt(0).getBoundingClientRect().top;

cursorY 是窗口中的光标 Y 位置。

甲选择对象表示文本的由用户或插入符号的当前位置选择的范围。

Selection.getRangeAt()返回一个范围对象，表示当前选择的范围之一。

Answer 2

这并不是真正的答案，而是需要思考的概念：

在 contenteditable 中，一切都由节点组成，就像其他任何 HTML 一样，因此您可以获得节点的位置，问题是您在节点中的位置（如果是文本，则节点内可能有 100 个字符）。所以你必须制作自己的单字符节点。

要获得某人键入的位置，您必须捕获 onkeypress 事件，停止传播气泡，获取他们要求的字符，将其填充到节点中（可能是一个跨度和“标记”），然后插入该节点节点。然后，您可以通过偏移量计算该跨度/节点的确切位置。

您可能需要删除跨度并随后将其替换为字符。

我还遇到过一个问题，如果在滚动应该发生时搞乱了气泡事件，插入符号可能会超出视口。

或者，这可能是一个稍微好一点的主意，而不是扰乱传播，允许浏览器自己插入字符，然后立即在之前或之后的跨度/节点中插入零宽度unicode字符（不可见），并计算它的位置。然后在即时或暂停打字时拉出标记。

是的，就是这么乱，抱歉。如果有人有更好的方法，我洗耳恭听。