Bagaimana Saya Boleh Menghalang Pemilihan Teks dalam HTML?

Teks Tidak Boleh Pilih dalam HTML

Soalan: Dalam UI HTML, adakah mungkin untuk menghalang pengguna daripada memilih tertentu elemen teks, seperti tab nama?

Jawapan:

Ya, terdapat beberapa cara untuk menjadikan teks tidak boleh dipilih dalam HTML:

Menggunakan CSS:

Dalam penyemak imbas moden, ini boleh dicapai dengan CSS menggunakan pilihan pengguna property:

*.unselectable {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Menggunakan Atribut tidak boleh dipilih (IE dan Opera):

Untuk versi lama IE dan Opera, atribut tidak boleh dipilih boleh digunakan pada elemen tertentu :

<div>
<p><strong>Nota:</strong> Atribut ini tidak diwarisi, jadi ia mesti dinyatakan untuk setiap elemen yang tidak boleh dipilih.</p>
<p><strong>NyahPilihan Rekursif dengan JavaScript:</strong></p>
<p>Sebagai alternatif, JavaScript boleh digunakan untuk menetapkan atribut tidak boleh dipilih secara rekursif untuk semua keturunan unsur:</p>
<pre class="brush:php;toolbar:false">function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));