3

看看下面 HTML 页面中的代码片段——

<div id="div2"> Text2 </div>

现在，用户从浏览器网页中显示的文本中仅选择“Te”...

如何检查用户是否选择了 id=div2 的全部内容？

我确实了解如何获取与用户选择的内容相对应的节点列表——但在这种情况下，由于用户只选择了“Te”——只获得了一个节点——即包含文本“Te”的文本节点...因此我很困惑...

检查用户选择是否包含整个 Div （或 p ）的最简单方法是什么？

另一个问题是，如果用户选择了多个 div 的内容，那么我如何检查每个（多个）div 的全部内容是否已被选中？

例如，看看下面的 HTML 片段——

 <div id="div1"> Text1 </div>
 <div id="div2"> Text2 </div>
 <div id="div3"> Text3 </div>

在这里，用户选择了上面所有 3 个 div 的文本...

最后，如果用户选择了多个 div 的内容，所有这些都在一个父 div 中，那么我如何检查用户是否选择了该父 div 的全部内容，或者只选择了一些内容？父 div 也可能包含其他 div、p 元素以及图像和链接......

我不介意为此目的使用纯 js 或 jquery 之类的库...

4

4 回答 4

2

我已经完成了这个，但它可能不是完美的，试一试，也许它会给你一些想法，或者其他人可以让它变得更好

function getSelectedText()
{
    var t = '';
   if(window.getSelection) t = window.getSelection();
   else if(document.getSelection) t = document.getSelection();
   else if(document.selection) t = document.selection.createRange();  
   if(t)
   { 
       return {
           selectedText:t.text ? t.text : t.toString(),
           fullContent:t.anchorNode ? t.anchorNode.nodeValue : t.parentElement().innerHTML
      };
    }
}


$(function(){
    $(document).on('mouseup', function(){
        var selection=getSelectedText();
        if(selection.selectedText)
        {
            var selected = $.trim(selection.selectedText);
            var full = $.trim(selection.fullContent);
            if(selected!=full) alert('Full content is not selected');
            else alert('Full content is selected');
         }
    });
});

演示。

于 2012-08-05T23:35:38.213 回答
1

我的 Rangy 库提供了一个containsNodeText()不属于 DOM Range 标准的 Range 对象的方法。看起来这对你所有的问题都有帮助。

var div2 = document.getElementById("div2");
var sel = rangy.getSelection();
var divTextIsSelected = false;
if (sel.rangeCount) {
    divTextIsSelected = sel.getRangeAt(0).containsNodeText(div2);
}
于 2012-08-06T00:15:00.080 回答
0

我为你做了这个例子，看看：

现场演示：http: //jsfiddle.net/oscarj24/FsZcV/

于 2012-08-05T23:37:20.260 回答
0

你的第一个问题怎么样？

window.getSelection().focusNode.nodeValue === window.getSelection()

请注意，focusNode是包含选择结束的元素，anchorNode是包含选择开始的元素。

在第二个问题中，您可以尝试使用类似的方式向上遍历 DOM

window.getSelection().getRangeAt(0).commonAncestorContainer

检索第getRangeAt(0)一个连续的选定元素容器范围。（如果用户执行 ctrl+select 之类的操作，您将拥有多个。）

以下是一些案例：

  • window.getSelection().getRangeAt(0).startOffset === 0如果选择了所有第一个元素。
  • window.getSelection().getRangeAt(0).endOffset === window.getSelection().getRangeAt(0).endContainer.length如果选择了所有最后一个元素。

如果您想显式检查每个元素，请查看这篇文章中元素的遍历方式：获取所选文本的所有 DOM 块元素

于 2012-08-05T22:00:40.670 回答