Bagaimanakah Saya Boleh Memilih Semua Teks Dalam DIV dengan Satu Klik Tetikus?

Pemilihan Teks yang Mudah dalam DIV dengan Klik Tetikus

Memilih teks dalam elemen DIV harus menjadi proses yang lancar untuk pengguna. Panduan ini akan menunjukkan cara yang cekap untuk menyerlahkan keseluruhan teks dengan satu klik tetikus.

Pertimbangkan DIV berikut:

<div>
<p>Objektifnya adalah untuk membolehkan pengguna mengklik di mana-mana dalam DIV dan mempunyai teks URL yang lengkap diserlahkan. Untuk mencapai matlamat ini, kami boleh memanfaatkan kuasa JavaScript.</p>
<h3 id="Pelaksanaan-JavaScript">Pelaksanaan JavaScript</h3>
<p>Kunci kepada penyelesaian ini terletak pada fungsi selectText:</p>
<pre class="brush:php;toolbar:false">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);
  }
}

Fungsi ini mengambil ID DIV sebagai hujah (containerid). Bergantung pada penyemak imbas, ia sama ada menggunakan kaedah createTextRange (untuk IE) atau kaedah createRange untuk memilih keseluruhan teks dalam DIV.

Integrasi HTML

Untuk menggunakan fungsi, sertakan yang berikut coretan dalam HTML anda:

<div>
<p>Dengan menugaskan pendengar acara onclick kepada DIV, fungsi selectText digunakan apabila mengklik mana-mana dalam DIV, menghasilkan pemilihan teks yang diingini.</p>
<p>Dengan pelaksanaan ini, pengguna boleh menyerlahkan keseluruhan teks dalam elemen DIV dengan mudah dengan satu klik, meningkatkan pengalaman pengguna dan membuat pemilihan teks dengan mudah.</p>
</div>