计算文本选择的xy位置

Question

我正在尝试使用DOM元素创建自己的文本选择。是的，我的意思是当您在此元素中选择它时，您在文本后面看到的蓝色背景。我们的想法是暂停默认行为（蓝色）并使用我自己的元素来完成工作，方法是找到选择的xy位置，然后放置绝对定位元素。我希望能够使用常规div来完成此操作。

我想我需要3个元素。一个用于顶行（可能是不完整的），一个用于中间块，​​一个用于最后一个（与顶部相同）。这是一张可以帮助您理解的图片：

我一直在考虑抓住mouseup/down然后mousemove，然后检查window.getSelection()，但到目前为止，我无法到达任何地方。

使用CSS ::selection将无效，因为该元素不会有焦点。

我感谢所有帮助！提前谢谢。

编辑： 偶然发现可能有帮助的https://code.google.com/p/rangy/？有这个插件经验的人吗？

EDIT2： 需要跨浏览器支持。

Answer 1

您可以使用getClientRnge：

var element = document.getElementById('element')

element.onmouseup = function(){
    var selection   = document.getSelection(),
        range       = selection.getRangeAt(0),
        clientRects = range.getClientRects()

    console.log(clientRects)
}

http://jsfiddle.net/XjHtG/

这将返回所有选择的左，右，上，下，宽度和高度。