javascript - 如何在 HTML 和 JavaScript 中检测用户是否选择了整个文档？

Question

我正在为 iPhone Safari 开发一个离线网页。

用于在网页中突出显示用户的选择。我已经实现了以下代码。

function highlight() {

    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt) {
            range = sel.getRangeAt(0);
        }
        document.designMode = "on";
        if (range) {
            sel.removeAllRanges();
            sel.addRange(range);
        }        
        document.execCommand("HiliteColor", false, "yellow");       
        document.designMode = "off";
    }
}

这对于正常选择来说非常有效。

编辑:

如何检测用户是否选择了整个文档？

要做什么？

Answer 1

下面的函数将返回一个 bool 值，指示是否选择了指定元素的所有内容并在所有主要浏览器(包括 IE)中工作。您可以将其与 document.body 一起使用来测试是否选择了整个页面。

function areElementContentsSelected(el) {
    var range, elRange;
    if (window.getSelection && document.createRange) {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            elRange = document.createRange();
            elRange.selectNodeContents(el);
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                range = sel.getRangeAt(i);
                if (range.compareBoundaryPoints(range.START_TO_START, elRange) <= 0 && range.compareBoundaryPoints(range.END_TO_END, elRange) >= 0) {
                    return true;
                }
            }
        }
    } else if (document.selection && document.selection.createRange && document.selection.type == "Text") {
        range = document.selection.createRange();
        elRange = range.duplicate();
        elRange.moveToElementText(el);
        return range.compareEndPoints("StartToStart", elRange) <= 0 && range.compareEndPoints("EndToEnd", elRange) >= 0;
    }
    return false;
}

alert( areElementContentsSelected(document.body) );