XY光标坐标在可编辑div内的位置

Question

我正在寻找一种方法来获取contenteditable div内插入符的X和Y坐标，类似于通过window.event获取鼠标坐标的方式，因为我需要在用户所在的位置打开一个弹出窗口并将插入符放到contenteditable div中。请问我该如何实现这个功能？非常感谢！

- Crista23

Answer 1

这里有一个方法： 在浏览器页面中选择文本的坐标 但是，在某些情况下，这种方法可能无法给出坐标。在这种情况下，您需要回退到在插入光标处插入一个元素、获取其位置并再次删除该元素。

- Tim Down

---

谢谢，Tim！这正是我在寻找的！我测试了它，在IE8、Firefox和Chrome中返回了预期的xy坐标，只是在Opera v 12.14中var rect = range.getClientRects()[0];返回未定义，在IE9中对于x = range.boundingLeft; y = range.boundingTop;我得到x = 0和y = 0。我需要它在这些浏览器上也能工作，有什么技巧吗？ :) - Crista23

谢谢，Tim！我找到了让它在IE9上运行的方法，就像你建议的那样，在插入符号处插入一个元素并获取其位置。非常感谢您所需的帮助和支持！ - Crista23

我也在尝试做同样的事情，但是当光标位于行首时计算坐标似乎无法正常工作。请问您是如何解决这个问题的？您是如何在光标处插入元素的？ - Rafael

大致意思是：创建一个<span>元素，向其中添加一个零宽度空格字符，然后将该<span>元素插入到当前选中文本的范围内。具体代码如下：var span = document.createElement("span"); span.appendChild(document.createTextNode("\u200b")); // 添加零宽度空格字符 window.getSelection().getRangeAt(0).insertNode(span); // 将 元素插入选中文本范围内 - Tim Down

@TimDown 谢谢！我错过了零宽度空格字符，不确定为什么需要添加它？另外，我认为新创建的元素需要被赋予一个ID，以便在使用后删除它。 - Rafael

@RafaelDiaz: 零宽度空格字符可确保浏览器不将元素完全折叠，从而确保其具有边界矩形。很抱歉，我不记得这是否符合规范。至于ID，如果您保留对span的引用，则不需要ID。在我之前评论中的代码之后，您只需执行span.parentNode.removeChild(span)即可将其删除。 - Tim Down