选定的文本和 xy 坐标答案

【问题标题】：selected text and xy coordinates选定的文本和 xy 坐标
【发布时间】：2011-05-05 14:26:04
【问题描述】：

如何同时获取选中的文字和单词的xy坐标？？

【问题讨论】：

你能澄清你的问题吗？哪个字？如果你选择一个段落呢？在这种情况下你想要什么（X，Y）？选择的开始？它的结束，mouseup 发生在哪里？然后只需使用 .pageX 和 .pageY。否则，请参阅Coordinates of selected text in browser page。

【解决方案1】：

刚刚google了一下：

var txt = "";

if (window.getSelection) {
    txt = window.getSelection();
} else if (document.getSelection) {
    // FireFox 
    txt = document.getSelection();
} else if (document.selection) {
    // IE 6/7 
    txt = document.selection.createRange().text;
}

txt = txt.toString()

没有简单的方法可以获取所选文本的 X/Y 坐标。因为它取决于它的容器位置和大小、文本字体、文本布局以及许多其他变量。

【讨论】：

这不会让你选择文本，除了在 IE 中。在其他浏览器中，它返回一个Selection 对象，您可以在该对象上调用toString() 来获取选定的文本。您还没有回答问题的另一个更难的部分。
感谢指正，我只是没有测试代码，因为它很琐碎。关于问题中较难的部分，我对此没有答案... :(
我以前在这里看到过这个：openshakespeare.org/work/hamlet 所以这不是如果它是如何的问题。希望看到这个答案。
实际上，刚刚发现当 mouseup 事件被触发时，他们正在获取鼠标的 clientX。聪明的黑客。
对于问题中较难的部分，请参阅Coordinates of selected text in browser page

【解决方案2】：

我正在将这个 jQuery 插件 http://plugins.jquery.com/node/7411 用于一个项目，它似乎可以完美地工作。您可以使用 jQuery 获取鼠标的位置 http://docs.jquery.com/Tutorials:Mouse_Position

这是我处理过的一些示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.textselect.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#select').bind('textselect click', function(e){
                console.log(e.text);
                console.log(e.pageX);
            })
        });
    </script>
    <!-- Date: 2010-11-05 -->
</head>
<body>
    <div id="select">
        This is a simple select test
    </div>
</body>
</html>

【讨论】：

你能给我一个没有jquery的例子吗？？

【解决方案3】：

你可以试试这样的

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.textselect.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#select').bind('textselect click', function(e){
                console.log(e.text);
                console.log(e.pageX);

                var selected_text = e.text
                var original_text = $(this).text();
                var parts = original_text.replace(e.text, "/").split("/");

                for(i in parts) {
                    console.log(parts[i])
                }
            })
        });
    </script>
    <!-- Date: 2010-11-05 -->
</head>
<body>
    <div id="select">
        This is a simple select test
    </div>
</body>
</html>

【讨论】：

【解决方案4】：

要扩展@MatuDuke 的答案，您可以像这样获取所选文本的位置：

var txt = window.getSelection(),
    range = txt.getRangeAt(0),
    boundary = range.getBoundingClientRect();

// Available positions:
// boundary.top
// boundary.bottom
// boundary.left
// boundary.right

这些将为您提供相对于视口的像素值。但是，它似乎不适用于文本区域，这是我目前正在尝试解决的问题。

【讨论】：

这对我来说效果很好，除了方法是 range.getBoundingClientRect()