CODEWITHSUNDEEP
javascriptjquerytextselection
notyourtype
notyourtype

Reputation: 276

Verify that text is selected (in a div)

I'm looking for a way to check if some text is selected (or not) in a specific element.

So far all I can find is a way to get selected text in the whole document with window.getSelection. I'd like to check if some text is selected in #myDiv only.

If text is selected in #myDiv, the function should return true. If text is selected elsewhere, or no text is selected, the function should return false.

Something like:

$.fn.isTextSelected = function(method) {

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

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

Can I do this with a simple jQuery method?

Upvotes: 1

Views: 1804

Answers (2)

Johan Karlsson
Johan Karlsson

Reputation: 6476

You could do something like this:

$.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>

Upvotes: 0

Kaiido
Kaiido

Reputation: 136708

You could look at the commonAncestorContainer of the Range Object you get from 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>

Upvotes: 4

Related Questions