3

以下の HTML ページのコード スニペットを見てください。

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

これで、ユーザーはブラウザの Web ページに表示されたテキストから「テ」のみを選択します...

ユーザーが id=div2 の div のコンテンツ全体を選択したかどうかを確認するにはどうすればよいですか?

ユーザーが選択したコンテンツに対応するノードのリストを取得する方法を理解していますが、この場合、ユーザーは「Te」のみを選択しているため、単一のノードのみが取得されます-つまり、テキスト「Te」を含むテキストノード...だから私は混乱しています...

ユーザーの選択が Div 全体 (または p) で構成されているかどうかを確認する最も簡単な方法は何ですか?

もう 1 つの質問は、ユーザーが複数の div のコンテンツを選択した場合、それらの (複数の) div のコンテンツ全体が選択されているかどうかを確認するにはどうすればよいですか?

たとえば、以下の HTML スニペットを見てください。

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

ここでは、ユーザーは上記の 3 つの div すべてのテキストを選択しています...

最後に、ユーザーが複数の div のコンテンツを選択し、そのすべてが 1 つの親 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。

2 番目の質問では、次のような方法で 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 に答える