Question

我在项目中使用rangy。我想测试一个元素是否被完全选中。我尝试了以下方法：

selRange.containsNode( el );

注意：selRange只是对window.getSelection（）的引用.getRangeAt（0）;

当从顶部到底部进行选择时，它可以正常工作，但不是相反。

Safari和Chrome会返回不同的结果，具体取决于您是自下而上还是自上而下选择。有什么想法吗？

Answer 1

究竟选择什么取决于选择的方式以及您正在使用的浏览器。如果您只是对选择元素中的所有文本感兴趣，那么Rangy的Range对象为此提供non-standard convenience method：

selRange.containsNodeText(el);

这是一个非Rangy等价物。它没有经过全面测试，但我认为它会起作用。

function containsNodeText(range, node) {
    var treeWalker = document.createTreeWalker(node,
        NodeFilter.SHOW_TEXT,
        { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
        false
    );
    var firstTextNode, lastTextNode, textNode;
    while ( (textNode = treeWalker.nextNode()) ) {
        if (!firstTextNode) {
            firstTextNode = textNode;
        }
        lastTextNode = textNode;
    }
    var nodeRange = range.cloneRange();
    if (firstTextNode) {
        nodeRange.setStart(firstTextNode, 0);
        nodeRange.setEnd(lastTextNode, lastTextNode.length);
    } else {
        nodeRange.selectNodeContents(node);
    }
    return range.compareBoundaryPoints(Range.START_TO_START, nodeRange) < 1 &&
        range.compareBoundaryPoints(Range.END_TO_END, nodeRange) > -1;
}

检查节点是否已完全选中

1 个答案: