选定的文本，XY坐标

如何让在同一时间选中的文本和单词的xy坐标？选定的文本，XY坐标

2010-11-05 user495688

你能澄清你的问题？哪个字？如果你选择一个段落呢？在这种情况下你想要什么（X，Y）？选择的开始？它的结尾，mouseup发生在哪里？然后只需使用.pageX和.pageY。否则，请参阅[浏览器页面中选定文本的坐标]（http://stackoverflow.com/questions/6846230/coordinates-of-selected-text-in-browser-page）。 – 2015-07-21 07:11:37

只是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坐标。因为它依赖于它的容器位置和大小，文本字体，文本布局以及许多其他变量。

来源

2010-11-05 13:24:54 MatuDuke

这不会让你选择的文本，IE中除外。在其他浏览器中，它会返回一个'Selection'对象，您可以在其中调用'toString（）'来获取选定的文本。对于问题的一部分，你也没有回答其他问题。 – 2010-11-08 14:24:25

感谢您的纠正，我只是没有测试代码，因为它非常微不足道。关于这个问题的困难的部分，我没有回答这个... :( – MatuDuke 2010-11-08 19:01:32

我已经看到了这一点之前完成在这里：http://openshakespeare.org/work/hamlet所以它不是一个问题如果它是如何。想看看这个回答的问题。 – 2012-07-30 18:33:25

我使用这个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>

来源

2010-11-05 13:44:19 dennismonsewicz

你能给我没有jQuery的？ – user495688 2010-11-08 08:17:14

工作你可以尝试这样的

<!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>

来源

2010-11-05 15:11:09 dennismonsewicz

东西要扩大@ MatuDuke的答案，您可以获得所选文字的位置，如下所示：

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

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

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

来源

2014-12-02 10:54:01 sowasred2012

这个工作很好的例子对我来说，除了方法是range.getBoundingClientRect（） – 2015-11-20 06:41:36

这正是我所期待的，谢谢！ – locrizak 2017-10-24 00:34:38

选定的文本，XY坐标

回答

相关问题