3

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

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

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

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

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

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

Edit2：需要跨浏览器支持。

4

1 回答 1

8

您可以使用 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/

这将返回所有选择的左侧、右侧、顶部、底部、宽度和高度。

于 2013-07-10T11:30:41.440 回答