计算文本选择的 xy 位置答案

【问题标题】：Calculating xy-position of text selection计算文本选择的 xy 位置
【发布时间】：2013-07-08 03:04:15
【问题描述】：

我正在尝试使用 DOM 元素创建自己的文本选择。是的，我的意思是当你在这个元素中选择它时你在文本后面看到的蓝色背景。这个想法是停止默认行为（蓝色）并使用我自己的元素通过找到选择的 xy 位置然后放置绝对定位的元素来完成这项工作。我希望能够使用普通的div 来做到这一点。

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

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

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

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

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

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

【问题讨论】：

我不确定您是否可以在不禁用功能的情况下阻止文本突出显示。 `user-select' 可让您阻止选择某个区域，但这意味着您将无法进行剪切和粘贴。另一个问题是性能。使用 javascript 来呈现高亮将比浏览器/操作系统本身执行的字母要慢得多。
@IsaacSuttell：你不能抓住onselect 并阻止默认操作吗？我会这么认为。但这也可能会杀死window.getSelection() 功能。我不认为会有巨大的性能影响，它只是三个要素。 Codemirror 似乎处理得很好，但我不知道如何。
我相信onselect is limited to form tags。
@IsaacSuttell：是的，也读一下。该死。如果您想伸出援助之手，请查看此内容：jsfiddle.net/XjHtG/9
如果您阻止默认行为，用户将无法复制文本，这是您想要的吗？

标签： javascript html textselection

【解决方案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/

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

【讨论】：

酷！知道如何停止默认行为吗？任何 IE 支持可能吗？
您可以使用 event.preventDefault 但随后将无法选择获取 X/Y。只需使用 ::selection jsfiddle.net/XjHtG/2 隐藏它
我认为我在正确的轨道上。不过需要解决一些问题，IE 支持就是其中之一。这是我到目前为止所拥有的：jsfiddle.net/XjHtG/7。我的方法（由图片描述）很有效，除非您选择从任何地方说直到I'm（最右边，底部第三行）。也不太清楚如何支持使用键盘进行选择。
做了更多的工作来支持键盘。部分有效：jsfiddle.net/XjHtG/9
好的，那么看起来到底是什么问题？对于其他问题，您可能应该打开一个新的特定问题。