Bagaimana Saya Boleh Menghalang Pemilihan Teks pada Halaman HTML Saya?

Menyahpilih Teks pada Halaman HTML: Panduan Komprehensif

Dalam bidang pengalaman pengguna, adalah wajar untuk menghalang pemilihan teks pada elemen tertentu dalam halaman HTML. Ini amat relevan untuk elemen seperti nama tab, yang boleh kelihatan tidak menarik apabila diserlahkan.

Penyelesaian CSS

Mujurlah, kebanyakan penyemak imbas moden menawarkan penyelesaian berasaskan CSS:

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

  /* IE 10+ */
  -ms-user-select: none;
  user-select: none;
}

Cuma tambah kod ini pada helaian gaya anda dan elemen yang ditetapkan akan menjadi tidak boleh dipilih.

IE dan Opera Alternatif

Untuk versi Internet Explorer dan Opera yang lebih awal, atribut yang tidak boleh dipilih boleh digunakan:

<div>
<p>Walau bagaimanapun , ambil perhatian bahawa atribut ini tidak diwarisi, jadi anda mungkin perlu menetapkannya secara eksplisit untuk setiap keturunan elemen.</p>
<p><strong>Penyelesaian JavaScript Rekursif</strong></p>
<p>Jika anda menghadapi isu pewarisan, anda boleh menggunakan JavaScript untuk menggunakan atribut tidak boleh dipilih secara rekursif:</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"));