檢查一個節點是否完全被選中

Question

我在我的項目中使用了rangy。我想測試一個元素是否完全被選中。我嘗試以下：

selRange.containsNode(el);

注意：selRange是簡單地window.getSelection（）的參考getRangeAt（0）;

當從上到下進行選擇時，它可以工作，但不會反其道而行。

如果您進行了自下而上或自上而下的選擇，則Safari和Chrome會返回不同的結果。有任何想法嗎？

Answer 1

究竟選擇什麼取決於選擇的方式和使用的瀏覽器。如果你在，是否所有的元素中的文本的選擇只是感興趣，四肢修長的Range對象爲此提供了一個non-standard convenience method：

selRange.containsNodeText(el); 

這裏是一個非瘦長等同。它沒有完全測試，但我認爲它會起作用。

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