如何獲得對此我選擇文本的座標 - 通過使用javascript

我有一個段落中，對選擇我想強調的只是選定文本的頂部我的div任何文本。爲此我製作了隱藏的div，並提供相對於我的段落容器的絕對位置。現在我需要選定的文本的座標，所以我可以給位置左和頂部div以在所選文本上突出顯示。如何獲得對此我選擇文本的座標 - 通過使用javascript

我正在使用一個腳本，它提醒我無論選擇什麼，我應該如何實現這個功能，以便隱藏的div可以被定位，因爲它正在使用腳本阻止。

<body> 
<div id="smll_pop"></div><!-- this will gonna positioned on body --> 
    <h2>Select some text on the page ...</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur</p> 
    <p>Lorem ipsum dolor sit amet, consectetur</p> 
    <p>Lorem ipsum dolor sit amet, consectetur</p> 
    <p>Lorem ipsum dolor sit amet, consectetur</p> 

    <script type="text/javascript"> 
     if(!window.SS){ 
      SS = {}; 
     }  
     SS.Selector = {}; 

     SS.Selector.getSelected = function(){ 
      var t = ''; 
      if(window.getSelection){ 
       t = window.getSelection();  
      }else if(document.getSelection){ 
       t = document.getSelection(); 

      }else if(document.selection){ 
       t = document.selection.createRange().text;  
      } 
      return t; 
     } 

     SS.Selector.mouseup = function(){ 
      var st = SS.Selector.getSelected(); 


      if(st!=''){ 
       alert("You selected:\n"+st); 
       document.getElementById("smll_pop").style.display="block"; 
      } 

     } 

     $(document).ready(function(){ 
      $(document).bind("mouseup", SS.Selector.mouseup); 
     }); 

    </script> 
    </body>

來源

2014-02-21 aabhi

與計算器的幫助，我的邏輯我所取得的解決方案。和我在這裏分享的代碼。

function getSelectionCoords() { 
       var sel = document.selection, range; 
       var x = 0, y = 0; 
       if (sel) { 
        if (sel.type != "Control") { 
         range = sel.createRange(); 
         range.collapse(true); 
         x = range.boundingLeft; 
         y = range.boundingTop; 

         document.getElementById("smll_pop").style.top="y"; 
         document.getElementById("smll_pop").style.left="x"; 
         alert(x+" "+y); 
         alert(typeOf(x)); 
        } 
       } 
       else if (window.getSelection) { 
        sel = window.getSelection(); 
        if (sel.rangeCount) { 
         range = sel.getRangeAt(0).cloneRange(); 
         if (range.getClientRects) { 
          range.collapse(true); 
          var rect = range.getClientRects()[0]; 
          x = rect.left; 
          y = rect.top; 

        document.getElementById("smll_pop").style.top=y-44+"px"; 
        document.getElementById("smll_pop").style.left=x-20+"px"; 
         alert(x+" "+y); <!-- will show coordinates --> 
         alert(typeof(x)); <!-- will show type as number --> 
         } 
        } 
       } 
      }

來源

2014-02-21 14:38:15 aabhi

如何獲得對此我選擇文本的座標 - 通過使用javascript

回答

相關問題