Pilih semua teks DIV dengan satu klik mouse

Cara menyorot / memilih konten tag DIV ketika pengguna mengklik DIV ... idenya adalah semua teks disorot / dipilih sehingga pengguna tidak perlu menyorot teks secara manual dengan mouse dan berpotensi melewatkan sedikit teks?

Misalnya, kita punya DIV seperti di bawah ini:

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

... dan ketika pengguna mengklik salah satu URL itu, seluruh teks URL disorot sehingga mereka dapat dengan mudah menyeret teks yang dipilih di browser, atau menyalin URL lengkap dengan klik kanan.

Terima kasih!

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>

Sekarang Anda harus meneruskan ID sebagai argumen, yang dalam hal ini adalah "dapat dipilih", tetapi ini lebih global, memungkinkan Anda untuk menggunakannya di mana saja beberapa kali tanpa menggunakan, seperti yang disebutkan chiborg, jQuery.

UPDATE 2017:

Untuk memilih panggilan konten node:

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

Ini berfungsi pada semua browser modern termasuk IE9 + (dalam mode standar).

Contoh Runnable:

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>

Jawaban asli di bawah ini sudah usang karena window.getSelection().addRange(range); sudah tidak digunakan lagi

Jawaban Asli:

Semua contoh di atas menggunakan:

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

tetapi masalahnya adalah ia memilih Node itu sendiri termasuk tag DIV, dll.

Untuk memilih teks Node sesuai pertanyaan OP, Anda perlu menelepon:

    range.selectNodeContents( ... )

Jadi cuplikan lengkapnya adalah:

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

Ada solusi CSS4 murni:

.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-selectadalah spesifikasi Modul CSS Level 4, yang saat ini merupakan properti CSS draf dan non-standar, tetapi browser mendukungnya dengan baik - lihat # search = user-select .

.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 */

}

<div class="selectable">
click and all this will be selected
</div>

Baca lebih lanjut tentang pilihan pengguna di sini di MDN dan mainkan dengannya di sini di w3scools

Jawaban Neuroxik sangat membantu. Saya hanya mengalami masalah dengan Chrome, karena ketika saya mengklik div eksternal, itu tidak berhasil. Saya bisa menyelesaikannya dengan menghapus rentang lama sebelum menambahkan rentang baru:

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>

Untuk konten yang dapat diedit (bukan input biasa, Anda perlu menggunakan selectNodeContents (bukan hanya selectNode).

CATATAN: Semua referensi ke "document.selection" dan "createTextRange ()" adalah untuk IE 8 dan yang lebih rendah ... Anda mungkin tidak perlu mendukung monster itu jika Anda mencoba melakukan hal-hal rumit seperti ini.

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

}

Menggunakan bidang area teks, Anda dapat menggunakan ini: (Melalui 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>

Beginilah cara saya melihat sebagian besar situs web melakukannya. Mereka hanya menatanya dengan CSS sehingga tidak terlihat seperti textarea.

Cuplikan ini menyediakan fungsionalitas yang Anda butuhkan . Apa yang perlu Anda lakukan adalah menambahkan acara ke div yang mengaktifkan fnSelect di dalamnya. Peretasan cepat yang seharusnya tidak Anda lakukan dan mungkin tidak berhasil, akan terlihat seperti ini:

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

Dengan asumsi jelas bahwa tautan yang ditautkan ke cuplikan telah disertakan.

Saya merasa berguna untuk membungkus fungsi ini sebagai plugin 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);
        }
    });
}

Jadi, ini menjadi solusi yang dapat digunakan kembali. Kemudian Anda bisa melakukan ini:

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

Dan itu akan memilih tes di div.

Bagaimana dengan solusi sederhana ini? :)

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

Tentu ini bukan konstruksi div, seperti yang Anda sebutkan, tetapi tetap berhasil untuk saya.

Niko Lay: Bagaimana dengan solusi sederhana ini? :)

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

.....

Kode sebelumnya:

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

Kode setelah:

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

Hanya bagian ini onclick = "this.select ();" id = "dapat dipilih" dalam kode saya berfungsi dengan baik. Memilih semua di kotak kode saya dengan satu klik mouse.

Terima kasih atas bantuannya Niko Lay!

Mudah dicapai dengan properti css yang dipilih pengguna disetel ke semua. Seperti ini:

div.anyClass {
  user-select: all;
}

$.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);
        }
    });
}

Jawaban di atas tidak berfungsi di Chrome karena addRange menghapus rentang yang ditambahkan sebelumnya. Saya tidak menemukan solusi untuk ini selain seleksi palsu dengan css.