Question

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

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

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

示例代码不是100％必需的，只要该方法有效并且得到充分解释。

Answer 1

这不是一个答案，而是要考虑的概念：

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

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

你可能不得不删除跨度，然后用字符替换它。

还遇到了一个问题，如果你在滚动应该发生时弄乱了气泡事件，插入符可能会出现在视口之外。

可选，这可能是一个更好的想法，而不是搞乱传播，允许浏览器自己插入字符，然后立即在span /节点中插入零宽度unicode字符（不可见）或之后，改为计算它的位置。然后在飞行中或当他们暂停键入时拉出标记。

是的，这太乱了，对不起。如果有人有更好的方法，我会全力以赴。

Answer 2

试试这个

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

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

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

Selection.getRangeAt()返回表示其中一个的范围对象   目前选择的范围。