计算文本选择的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/

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