可内容编辑的 div 内的 XY 插入符号坐标答案

【问题标题】：XY Caret Coordinates inside a contenteditable div可内容编辑的 div 内的 XY 插入符号坐标
【发布时间】：2013-04-24 12:03:15
【问题描述】：

我正在寻找一种在可内容编辑的 div 中获取插入符号 xy 坐标的方法，其方式与使用 window.event 获取鼠标坐标的方式类似，因为我需要在用户所在的位置打开一个弹出窗口与 contenteditable div 内的插入符号。我怎样才能做到这一点？非常感谢！

【问题讨论】：

【解决方案1】：

这是一种方法：

但是，在某些情况下，这不会为您提供坐标，在这种情况下，您需要退回到在插入符号处插入一个元素，获取其位置并再次删除该元素。

【讨论】：

谢谢，蒂姆！这正是我想要的！我对其进行了测试，它在 IE8、Firefox 和 Chrome 上按预期返回 xy 坐标，这只是在 Opera v 12.14 var rect = range.getClientRects()[0];返回 undefined 并且在 IE9 中为 x = range.boundingLeft; y = range.boundingTop;我得到 x = 0 和 y= 0。我也需要它在这些浏览器上工作，关于如何做到这一点的任何技巧？ :)
谢谢蒂姆！我也找到了让它在 IE9 上工作的方法，就像你建议我在插入符号处插入一个元素并获取它的位置一样。非常感谢您急需的帮助和支持！
我正在尝试做同样的事情，如果插入符号位于行首，则在计算坐标时似乎不起作用。我可以知道你是如何解决这个问题的吗？您是如何在插入符号处插入元素的？
@RafaelDiaz：类似于var span = document.createElement("span"); span.appendChild( document.createTextNode("\u200b") /* Zero-width space character */); window.getSelection().getRangeAt(0).insertNode(span);
@RafaelDiaz：零宽度空格字符确保元素不会被浏览器视为完全折叠，从而确保它具有边界矩形。恐怕我不记得这是否符合规范。至于ID，如果您保留对跨度的引用，则不需要ID。在我之前评论中的代码之后，您可以简单地通过 span.parentNode.removeChild(span) 再次删除它。