验证是否选择了文本（在 div 中）

Question

我正在寻找一种方法来检查是否在 特定 元素中选择了（或未选择）某些文本。

到目前为止，我只能找到一种使用window.getSelection 在整个文档中获取选定文本的方法。我想检查是否仅在#myDiv 中选择了某些文本。

如果在#myDiv 中选择了文本，该函数应该返回true。如果在别处选择了文本，或者没有选择文本，该函数应返回 false。

类似：

$.fn.isTextSelected = function(method) {

    return this[0].selectionEnd - this[0].selectionStart > 0 ? true : false;
}

$('#myDiv').isTextSelected();

我可以用一个简单的 jQuery 方法做到这一点吗？

Answer 1

您可以查看从Selection.getRangeAt(0) 获得的Range Object 中的commonAncestorContainer；

function isSelectionOnlyIn(yourDiv) {
  var sel = window.getSelection();
  if (sel.rangeCount < 1) return false;
  var range = sel.getRangeAt(0);
  if (range.collapsed) return false;
  var cont = range.commonAncestorContainer;

  return ($(cont) === $(yourDiv) || $(cont).parents(yourDiv).length > 0);
}
document.addEventListener('keydown', function() {
  $('#result').text(isSelectionOnlyIn('#theOne'));
}, false);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='theOne'>if this text is selected it should return true</div>
<div>but if this one or a part of this one is, then it will return false.</div>
<p id="result">Type any key to check if text is selected</p>

Answer 2

你可以这样做：

$.fn.extend({
    isTextSelected: function () {
        var top = this.offset().top;
        var bottom = this.offset().top + this.height();
        
        console.log(window.getSelection());
            
        if ( (selectionStart > top && selectionStart < bottom ||
             selectionEnd > top && selectionEnd < bottom ||
            selectionStart < top && selectionEnd > bottom ||
            selectionEnd < top && selectionStart > bottom) && 
            window.getSelection().type != "Caret" )
        {
            return true;   
        }
        return false;
    }
});

var selectionStart,
    selectionEnd;

window.onmouseup = function (e) {
    selectionEnd = e.pageY;
    $("#result").html( $("#select").isTextSelected() );
}

window.onmousedown = function(e) { 
    selectionStart = e.pageY;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><div>Bacon ipsum dolor amet drumstick doner rump, venison spare ribs chicken short loin pork loin biltong bresaola shoulder ball tip. Sirloin pancetta cow t-bone chuck meatloaf tenderloin bacon. Shoulder beef jerky, pastrami sausage boudin hamburger t-bone landjaeger meatball pig. Sirloin swine cupim bacon cow. Picanha meatloaf kevin t-bone fatback shoulder.</div></div>
<br>
<br>
<div id="select">Boudin fatback salami chuck porchetta tongue tenderloin corned beef pork rump chicken tail leberkas hamburger picanha. Kielbasa sirloin jerky ball tip short ribs cow. Short loin andouille sausage filet mignon turducken pork chop tail tri-tip cow hamburger beef ribs corned beef t-bone meatloaf fatback. Ball tip doner hamburger, meatball meatloaf prosciutto pork belly drumstick leberkas turkey beef. Rump chuck ham pancetta boudin pork chop tri-tip tongue cupim.</div>
<br>
<br>
<div>Boudin ham hock venison shankle shoulder frankfurter porchetta tri-tip, jerky swine. Alcatra jerky swine short loin, strip steak boudin cupim ham ribeye turducken shankle t-bone venison. Salami biltong swine, short ribs ham doner bacon hamburger t-bone pork chop kielbasa ribeye tail pork short loin. Turkey frankfurter meatloaf sirloin brisket pancetta short loin, jowl flank ball tip pork loin bacon tri-tip.</div>
<br>
<br>
<br>
<br>
<div id="result"></div>