Проверьте, что текст выбран (в 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

Вы можете посмотреть на commonAncestorContainer из Range Object, вы получаете от Selection.getRangeAt(0);

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>