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

Posted 2023-05-07

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

【英文标题】：Can I find the cursor's pixel position in a ContentEditable?

【发布时间】：2011-06-14 12:28:10

【问题描述】：

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

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

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

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

【问题讨论】：

当您说光标时，您是指鼠标光标还是输入位置（例如，可能在单词的中间）。如果您的意思是鼠标，那么您可以绑定到 mouseover 事件并抓住鼠标位置。

@Blair 我的意思是输入位置，是的，它可能在一个单词的中间。

【参考方案1】：

试试这个

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

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

Selection 对象表示由 用户或插入符号的当前位置。

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

【参考方案2】：

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

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

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

您可能必须删除跨度，然后只用字符替换它。

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

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

是的，就是这么乱，抱歉。如果有人有更好的方法，我会全力以赴。