javascript - 计算文本选择的 xy 位置

Question

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

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

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

使用 CSS ::selection 将不起作用，因为该元素将没有焦点。

我感谢所有能得到的帮助!提前致谢。

编辑: 偶然发现https://code.google.com/p/rangy/这可能有帮助？有没有人使用过这个插件？

编辑2: 需要跨浏览器支持。

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/

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