Bagaimana untuk Mengambil Teks Terpilih dari Kotak Teks dalam JavaScript?

Mendapatkan semula Teks Terpilih daripada Kotak Teks dalam JavaScript

Apabila bekerja dengan borang web, selalunya perlu untuk mendapatkan semula teks yang dipilih pengguna daripada kotak teks. Ini boleh dilakukan menggunakan JavaScript dan langkah berikut:

Langkah 1: Laksanakan Keserasian Merentas Pelayar

Untuk memastikan keserasian merentas pelbagai penyemak imbas, gunakan kod berikut untuk menentukan kaedah pilihan untuk mendapatkan teks yang dipilih:

<code class="js">function getSelection(textComponent) {
  if (textComponent.selectionStart !== undefined) {
    // Standards-compliant version
    return textComponent.value.substring(textComponent.selectionStart, textComponent.selectionEnd);
  } else if (document.selection !== undefined) {
    // Internet Explorer version
    textComponent.focus();
    var sel = document.selection.createRange();
    return sel.text;
  }
}</code>

Langkah 2: Dapatkan Teks Terpilih pada Acara

Untuk mendapatkan semula teks yang dipilih pengguna apabila mereka mengklik butang atau elemen UI yang lain, lampirkan pendengar acara pada elemen:

<code class="js">document.getElementById("button").addEventListener("click", function() {
  var selectedText = getSelection(document.getElementById("textbox"));
  alert(selectedText);
});</code>

Langkah 3: Tangani Internet Explorer Quirks

Internet Explorer 6 mungkin memerlukan langkah tambahan untuk mendapatkan semula teks yang dipilih dengan betul. Gunakan kod berikut:

<code class="js">document.onkeydown = function (e) {
  getSelection(document.getElementById("textbox"));
};</code>

Contoh:

Contoh berikut menunjukkan kefungsian dalam tindakan:

<code class="html"><input id="textbox" type="text" value="Lorem ipsum dolor sit amet">
<button id="button">Get Selected Text</button>

<script>
  document.getElementById("button").addEventListener("click", function() {
    var selectedText = getSelection(document.getElementById("textbox"));
    alert(selectedText);
  });
</script></code>

Dengan mengikuti langkah ini , anda boleh mendapatkan semula teks yang dipilih dengan berkesan daripada kotak teks dalam JavaScript, memastikan keserasian merentas penyemak imbas dan menangani keanehan Internet Explorer.

Atas ialah kandungan terperinci Bagaimana untuk Mengambil Teks Terpilih dari Kotak Teks dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!