Javascript 计算文本选择的xy位置

我正在尝试使用DOM元素创建自己的文本选择。是的，我指的是在该元素中选择文本时，在文本后面看到的蓝色背景。其思想是停止默认行为（蓝色），并通过查找选择的xy位置，然后放置绝对定位的元素，使用我自己的元素来执行此操作。我希望能够使用常规的

div

来实现这一点

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

我一直在考虑捕捉

mouseup/down

，然后捕捉

mousemove

，然后选中

window.getSelection（）

，但到目前为止，我在任何地方都遇到了麻烦

使用CSS

：：选择将不起作用，因为元素没有焦点

我感谢所有能得到的帮助！提前谢谢

编辑：
偶然发现哪一个可能有用？有没有人有这个插件的经验

编辑2：
需要跨浏览器支持。
您可以使用getClientRnge：

var element = document.getElementById('element')

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

    console.log(clientRects)
}


这将返回所做的所有选择的左、右、上、下、宽度和高度。
我不确定您是否可以在不禁用功能的情况下阻止文本高亮显示。允许您阻止选择某个区域，但这意味着您将无法剪切和粘贴。另一个问题是性能。使用javascript渲染突出显示将比浏览器/os本机渲染慢得多。@IsaacSuttell:您不能捕获
onselect
并阻止默认操作吗？我想是的。但这可能也会扼杀
window.getSelection（）
功能。我不认为会有一个巨大的性能打击，它只是三个要素。Codemirror似乎处理得很好，但我不知道如何处理。我相信。@IsaacSuttell:是的，也读一下。该死如果你想伸出援助之手，请查看以下内容：如果你阻止用户无法复制文本的默认行为，这就是你想要的吗？酷！你知道怎样才能阻止默认行为吗？任何可能的IE支持？您可以使用event.preventDefault，但是没有选择来获得X/Y。只需使用：：selection将其隐藏即可。我认为我的思路是正确的。不过有几个问题需要解决。以下是我到目前为止的情况：。我的方法（如图所示）很有效，除非你选择“从任何地方说”直到“我是”

（最右边，底部第三行）。也不太确定如何支持使用键盘进行的选择。为支持键盘做了更多的工作。部分有效：好的，那么确切的问题是什么？对于其他问题，您可能应该打开一个新的特定问题。