Как узнать, находится ли выделенный текст внутри определенного div

У меня есть два div, как показано ниже:

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

Теперь, я хочу знать, когда выбран какой-то текст, а затем нажата кнопка, если выделенный текст находится под "div1" или нет. Как я могу это сделать?

Изменить: И решение должно работать в IE-7 и выше.

Ответы

Ответ 1

Функция elementContainsSelection() ниже возвращает логическое значение, представляющее, содержит ли указанный элемент весь выбор пользователя и работает во всех основных браузерах, включая IE 6.

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

код:

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;
}

Ответ 2

вы можете наблюдать событие mouseup для каждого div и привязать к нему следующий метод:

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;
}

этот метод затем вернет выделенный текст, он скажет вам, что процесс выбора закончился в div, который активировал событие. если вам нужна начальная точка, вам нужно привязать событие mousedown к div, которое будет хранить идентификатор элементов в переменной, поэтому вы можете определить начальную и конечную точку процесса выбора и выяснить, какие divs находятся между ними.

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

если метод getSelected возвращает пустую строку, вы должны reset start- и endpoint.

Ответ 3

что-то вроде:

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;
}

Ответ 4

@TimDown Это всегда возвращает false, находится ли он внутри 'node' или нет

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