Verify that text is selected (in a div)

Question

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?

How about if text is selected in both `#myDiv` and another div? — Johan Karlsson, Aug 05 '15 at 15:34
@michael That will not work if I have the same text elsewhere: [jsFiddle](http://jsfiddle.net/gk531pvd/) — notyourtype, Aug 05 '15 at 15:49
@caeth Then text is selected in `#myDiv` and the function should still return true — notyourtype, Aug 05 '15 at 15:54
@michael even with `-1` It still doesn't work, since it returns true all the time — notyourtype, Aug 05 '15 at 15:55

Kaiido · Accepted Answer · 2015-08-05T15:58:12.333

4

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>

edited Aug 05 '15 at 15:58

answered Aug 05 '15 at 15:49

Kaiido

123,334
13
219
285

Thanks a lot, I didn't know of the range object. Will this also work in IE? – notyourtype Aug 05 '15 at 16:07
It will work in IE9+ If you need to support older browsers, you may try with `document.selection`, but there is no `commonAncestorContainer` on the range object returned by `createRange();` – Kaiido Aug 05 '15 at 16:22

score 0 · Answer 2 · answered Aug 05 '15 at 17:33

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>

"I'd like to check if some text is selected in #myDiv only." — Kaiido, Aug 06 '15 at 03:50

Verify that text is selected (in a div)

2 Answers2