How to know if selected text is inside a specific div

I have two divs as shown below:

<div id="div1">
<p>something</p>
<div><table><tr><td>Div1</td></tr></table></div>
</div>
<div id="div2">
<p>something else</p>
<div><table><tr><td>Div2</td></tr></table></div>
</div>
<button type="button">Check</button>

Now, I want to know when some text is selected and then the button pressed, if the selected text is under "div1" or not. How can I do that?

Edit: And the solution has to work in IE-7 and above.

Answers:

Answer

The elementContainsSelection() function below returns a boolean representing whether the specified element contains the whole of the user's selection and works in all major browsers, including IE 6.

Live demo: http://jsfiddle.net/eT8NQ/

Code:

function isOrContains(node, container) {
    while (node) {
        if (node === container) {
            return true;
        }
        node = node.parentNode;
    }
    return false;
}

function elementContainsSelection(el) {
    var sel;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount > 0) {
            for (var i = 0; i < sel.rangeCount; ++i) {
                if (!isOrContains(sel.getRangeAt(i).commonAncestorContainer, el)) {
                    return false;
                }
            }
            return true;
        }
    } else if ( (sel = document.selection) && sel.type != "Control") {
        return isOrContains(sel.createRange().parentElement(), el);
    }
    return false;
}
Answer

you could observe a mouseup event on each div, and bind the following method to it:

var endpoint = null
function getselected(event){
  endpoint = event.target;
  var t = '';
  if(window.getSelection){
    t = window.getSelection();
  }else if(document.getSelection){
    t = document.getSelection();
  }else if(document.selection){
    t = document.selection.createRange().text;
  }
  return t;
}

this method will then return the selected text, it will tell you that the selection process ended on the div that fired the event. if you need the startpoint to, you have to bind a mousedown event to the divs, that will store the elements id in a variable, so you can determine the start- and endpoint of the selection process and find out which divs lie in between.

var startpoint = null;
function beginSelection(event){
  startpoint = event.target;
}

if the getSelected-method returns an empty string, you should reset start- and endpoint.

Answer

something like:

function checkSelection() {
    function checkNode(node) {
        do {
            if(node.id == "div1")
                return true;
        } while(node = node.parentNode);

        return false;
    }

    if(window.getSelection) {
        var selection = window.getSelection();
        for(var i = 0, l = selection.rangeCount; i < l; i++) {
            var range = selection.getRangeAt(i), start = range.startContainer, end = range.endContainer;
            if(checkNode(start) || (start != end && checkNode(end)))
                return true;
        }
    }

    if(window.scelection && window.selection.createRange) {
        var range = window.selection.createRange();
        if(range)
            return checkNode(range.parentElement());
    }

    return false;
}
Answer

@TimDown This always returns false whether it is inside 'node' or not

if ( (sel = document.selection) && sel.type != "Control") {
    return isOrContains(sel.createRange().parentElement(), el);
}

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.