如何在div中使用jquery/javascript

Question

有很多代碼可以在頁面中獲得選擇，但我想要一個代碼在div中選擇， 如果選擇不在我的div中，函數必須返回空字符串;

有一個jquery插件僅適用於textarea，但不適用div。 (here)

感謝

Answer 1

由於邊界比較冗長，並且因爲IE採用與其他瀏覽器不同的方法，所以稍微詳細一些，但是在所有主流瀏覽器中完成這項工作。它還處理Firefox中的多個選擇。

的jsfiddle：http://jsfiddle.net/Q982A/2/

代碼：

function getSelectedTextWithin(el) { 
    var selectedText = ""; 
    if (typeof window.getSelection != "undefined") { 
     var sel = window.getSelection(), rangeCount; 
     if ((rangeCount = sel.rangeCount) > 0) { 
      var range = document.createRange(); 
      for (var i = 0, selRange; i < rangeCount; ++i) { 
       range.selectNodeContents(el); 
       selRange = sel.getRangeAt(i); 
       if (selRange.compareBoundaryPoints(range.START_TO_END, range) == 1 && selRange.compareBoundaryPoints(range.END_TO_START, range) == -1) { 
        if (selRange.compareBoundaryPoints(range.START_TO_START, range) == 1) { 
         range.setStart(selRange.startContainer, selRange.startOffset); 
        } 
        if (selRange.compareBoundaryPoints(range.END_TO_END, range) == -1) { 
         range.setEnd(selRange.endContainer, selRange.endOffset); 
        } 
        selectedText += range.toString(); 
       } 
      } 
     } 
    } else if (typeof document.selection != "undefined" && document.selection.type == "Text") { 
     var selTextRange = document.selection.createRange(); 
     var textRange = selTextRange.duplicate(); 
     textRange.moveToElementText(el); 
     if (selTextRange.compareEndPoints("EndToStart", textRange) == 1 && selTextRange.compareEndPoints("StartToEnd", textRange) == -1) { 
      if (selTextRange.compareEndPoints("StartToStart", textRange) == 1) { 
       textRange.setEndPoint("StartToStart", selTextRange); 
      } 
      if (selTextRange.compareEndPoints("EndToEnd", textRange) == -1) { 
       textRange.setEndPoint("EndToEnd", selTextRange); 
      } 
      selectedText = textRange.text; 
     } 
    } 
    return selectedText; 
} 

或者，你可以用我的Rangy庫，代碼變爲：

function getSelectedTextWithin(el) { 
    var selectedText = ""; 
    var sel = rangy.getSelection(), rangeCount = sel.rangeCount; 
    var range = rangy.createRange(); 
    range.selectNodeContents(el); 
    for (var i = 0; i < rangeCount; ++i) { 
     selectedText += sel.getRangeAt(i).intersection(range); 
    } 
    return selectedText; 
} 

Answer 2

您可以通過使用文本選擇插件實現這一點 - http://plugins.jquery.com/node/7411

在綁定代碼然後你可以詢問事件目標，看它是否是您所需要的元素中。

<script type="text/javascript"> 
    $(function() { 
     $(document).bind('textselect', function(e) { 
      if ($(e.target).attr("id") == "myPara") { 
       alert(e.text); 
      } 
     }); 
    }); 
</script> 

<p id="myPara">Lorem ipsum dolor sit amet consectetuer Lorem sapien hendrerit elit Cum. Morbi Curabitur convallis sagittis vitae sem parturient augue orci tortor eget. Et porttitor eros id consectetuer est molestie tellus fames netus nec. Ullamcorper id Nam eros sed nascetur Maecenas turpis at laoreet eleifend. Lorem id parturient dapibus Aenean cursus congue justo auctor pharetra orci. Hac amet.</p> 

<p id="noSelect">Lorem ipsum dolor sit amet consectetuer Lorem sapien hendrerit elit Cum. Morbi Curabitur convallis sagittis vitae sem parturient augue orci tortor eget. Et porttitor eros id consectetuer est molestie tellus fames netus nec. Ullamcorper id Nam eros sed nascetur Maecenas turpis at laoreet eleifend. Lorem id parturient dapibus Aenean cursus congue justo auctor pharetra orci. Hac amet.</p> 

Answer 3

您可以使用：

var node = window.getSelection ?   
     window.getSelection().focusNode.parentNode: 
     document.selection.createRange().parentElement(); 

獲取該元素在其中選擇結束。

然後您可以確定該元素是否在您的div內。