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

Question

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

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

有没有可靠的方法？如果不是查找光标的顶部/左侧位置，则替代方法是找到行的顶部位置。

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

Answer 1

这不是一个真正的答案，但概念来思考：

在CONTENTEDITABLE，一切由就像任何其他HTML节点，这样你就可以得到该节点的位置，问题出在哪里在你的节点（如果是文本，则节点内可能有100个字符）。所以你必须制作你自己的单个字符节点。

要获得某个类型的位置，您必须捕获onkeypress事件，停止传播泡泡，获取他们要求的字符，将其填入节点（也许跨度ala“标记”）然后插入该节点。然后，您可以通过偏移量计算该跨度/节点的确切位置。

您可能必须删除该跨度并将其替换为之后的字符。

还有我遇到过的问题，如果在滚动应该发生时混淆了气泡事件，则脱字符可能会超出视口。

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

是的，这是一团糟，对不起。如果有人有更好的办法，我全都耳熟能详。

Answer 2

试试这个

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

走马是在窗口光标Y位置。

A Selection object代表由 用户选择的文本范围或插入符的当前位置。

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