シングルマウスクリックですべてのDIVテキストを選択

ユーザーがDIVをクリックしたときにDIVタグのコンテンツを強調表示/選択する方法...すべてのテキストが強調表示/選択されるため、ユーザーは手動でテキストをマウスで強調表示する必要がなく、潜在的にテキストの一部が欠けていますか？

たとえば、次のようなDIVがあるとします。

<div id="selectable">http://example.com/page.htm</div>

...そしてユーザーがそのURLのいずれかをクリックすると、URLテキスト全体がハイライト表示されるので、ブラウザーで選択したテキストを簡単にドラッグしたり、右クリックで完全なURLをコピーしたりできます。

ありがとう！

function selectText(containerid) {
    if (document.selection) { // IE
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(containerid));
        range.select();
    } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById(containerid));
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
    }
}

<div id="selectable" onclick="selectText('selectable')">http://example.com/page.htm</div>

今度は、IDを引数として渡す必要があります。この場合は「選択可能」ですが、よりグローバルであり、Chiborgが述べたように、jQueryを使用せずにどこでも複数回使用できます。

更新2017：

ノードのコンテンツ呼び出しを選択するには：

window.getSelection().selectAllChildren(
    document.getElementById(id)
);

これは、IE9 +（標準モード）を含むすべての最新ブラウザーで機能します。

実行可能な例：

function select(id) {
  window.getSelection()
    .selectAllChildren(
      document.getElementById("target-div") 
    );
}

#outer-div  { padding: 1rem; background-color: #fff0f0; }
#target-div { padding: 1rem; background-color: #f0fff0; }
button      { margin: 1rem; }

<div id="outer-div">
  <div id="target-div">
    Some content for the 
    <br>Target DIV
  </div>
</div>

<button onclick="select(id);">Click to SELECT Contents of #target-div</button>

以下の元の回答は廃止されたためwindow.getSelection().addRange(range); 廃止されました

元の回答：

上記の例はすべて次のものを使用しています。

    var range = document.createRange();
    range.selectNode( ... );

しかし、その問題は、DIVタグなどを含むノード自体を選択することです。

OPの質問に従ってノードのテキストを選択するには、代わりに呼び出す必要があります。

    range.selectNodeContents( ... )

したがって、完全なスニペットは次のようになります。

    function selectText( containerid ) {

        var node = document.getElementById( containerid );

        if ( document.selection ) {
            var range = document.body.createTextRange();
            range.moveToElementText( node  );
            range.select();
        } else if ( window.getSelection ) {
            var range = document.createRange();
            range.selectNodeContents( node );
            window.getSelection().removeAllRanges();
            window.getSelection().addRange( range );
        }
    }

純粋なCSS4ソリューションがあります。

.selectable{
    -webkit-touch-callout: all; /* iOS Safari */
    -webkit-user-select: all; /* Safari */
    -khtml-user-select: all; /* Konqueror HTML */
    -moz-user-select: all; /* Firefox */
    -ms-user-select: all; /* Internet Explorer/Edge */
    user-select: all; /* Chrome and Opera */

}

user-selectはCSSモジュールレベル4仕様です。これは現在ドラフトで非標準のCSSプロパティですが、ブラウザはこれを適切にサポートしています— ＃search = user-selectを参照してください。

MDNでのユーザー選択の詳細については、こちらをお読みください。

Neuroxikの答えは本当に役に立ちました。Chromeで問題があったのは、外部divをクリックしたときに機能しなかったためです。新しい範囲を追加する前に古い範囲を削除して解決できます：

function selectText(containerid) {
    if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(containerid));
        range.select();
    } else if (window.getSelection()) {
        var range = document.createRange();
        range.selectNode(document.getElementById(containerid));
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
    }
}
<div id="selectable" onclick="selectText('selectable')">http://example.com/page.htm</div>

コンテンツを編集できるもの（通常の入力ではない）の場合は、（selectNodeだけでなく）selectNodeContentsを使用する必要があります。

注：「document.selection」および「createTextRange（）」へのすべての参照は、IE 8以下を対象としています...このようなトリッキーなことを行おうとしている場合は、そのモンスターをサポートする必要はないでしょう。

function selectElemText(elem) {

    //Create a range (a range is a like the selection but invisible)
    var range = document.createRange();

    // Select the entire contents of the element
    range.selectNodeContents(elem);

    // Don't select, just positioning caret:
    // In front 
    // range.collapse();
    // Behind:
    // range.collapse(false);

    // Get the selection object
    var selection = window.getSelection();

    // Remove any current selections
    selection.removeAllRanges();

    // Make the range you have just created the visible selection
    selection.addRange(range);

}

テキスト領域フィールドを使用すると、これを使用できます：（Via Google）

<form name="select_all">

    <textarea name="text_area" rows="10" cols="80" 
    onClick="javascript:this.form.text_area.focus();this.form.text_area.select();">

    Text Goes Here 

    </textarea>
</form>

これは、ほとんどのWebサイトがそれを実行している方法です。彼らはCSSでそれをスタイルするだけなので、textareaのようには見えません。

このスニペットは、必要な機能を提供します。あなたがする必要があるのは、そのdivにfnSelectをアクティブにするイベントを追加することです。完全に行うべきではなく、おそらく機能しない可能性のある簡単なハックは、次のようになります。

document.getElementById("selectable").onclick(function(){
    fnSelect("selectable");
});

明らかに、リンクされたスニペットが含まれていたと仮定します。

この関数をjQueryプラグインとしてラップすると便利です。

$.fn.selectText = function () {
    return $(this).each(function (index, el) {
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(el);
            range.select();
        } else if (window.getSelection) {
            var range = document.createRange();
            range.selectNode(el);
            window.getSelection().addRange(range);
        }
    });
}

したがって、それは再利用可能なソリューションになります。次に、これを行うことができます：

<div onclick="$(this).selectText()">http://example.com/page.htm</div>

そして、それはdivでテストを選択します。

この簡単な解決策はどうですか？:)

<input style="background-color:white; border:1px white solid;" onclick="this.select();" id="selectable" value="http://example.com/page.htm">

確かに、あなたが言ったようなdiv構築ではありませんが、それでも私のために働いています。

Niko Lay：この簡単な解決策はどうですか？:)

`<input style="background-color:white; border:1px white solid;" onclick="this.select();" id="selectable" value="http://example.com/page.htm">`

.....

前のコード：

<textarea rows="20" class="codearea" style="padding:5px;" readonly="readonly">

後のコード：

<textarea rows="20" class="codearea" style="padding:5px;" readonly="readonly" onclick="this.select();" id="selectable">

この部分onclick = "this.select（）;" 私のコードのid = "selectable"は問題なく動作しました。コードボックス内のすべてを1回のマウスクリックで選択します。

ニコ・レイ、助けてくれてありがとう！

$.fn.selectText = function () {
    return $(this).each(function (index, el) {
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(el);
            range.select();
        } else if (window.getSelection) {
            var range = document.createRange();
            range.selectNode(el);
            window.getSelection().addRange(range);
        }
    });
}

addRangeが以前に追加された範囲を削除するため、上記の回答はChromeでは機能しません。私はCSSでの偽の選択以外にこれに対する解決策を見つけませんでした。

cssプロパティのuser-selectをallに設定すると、簡単に実現できます。このような：

div.anyClass {
  user-select: all;
}