選定的文本，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座標

回答

相關問題