Cara Menangkap Teks Terpilih daripada Kotak Teks dalam JavaScript: Penyelesaian Komprehensif

Cara Menangkap Pemilihan Teks daripada Kotak Teks dalam JavaScript

Ramai pembangun JavaScript menghadapi cabaran apabila bertujuan untuk mendapatkan semula teks yang dipilih daripada kawalan kotak teks . Artikel ini menangani isu ini dengan analisis komprehensif dan penyelesaian praktikal.

Merakam Teks Terpilih untuk Penyemak Imbas Moden:

Untuk penyemak imbas moden yang menyokong API pemilihan HTML5, coretan kod berikut boleh digunakan:

<code class="javascript">function ShowSelection() {
  const textArea = document.getElementById('textbox');
  const selection = textArea.selectionStart !== undefined
    ? textArea.value.substring(textArea.selectionStart, textArea.selectionEnd)
    : '';
  alert(`You selected: ${selection}`);
}</code>

Merakam Teks Terpilih untuk Internet Explorer:

Internet Explorer memerlukan pendekatan yang berbeza. Kod berikut untuk penyemak imbas ini:

<code class="javascript">if (document.selection !== undefined) {
  textArea.focus();
  const sel = document.selection.createRange();
  const selection = sel.text;
  alert(`You selected: ${selection}`);
}</code>

Mengekalkan Pemilihan pada Klik Butang:

Untuk mengelakkan pemilihan daripada dikosongkan apabila butang diklik, fokus mesti kembali ke kotak teks. Ini boleh dicapai dengan mengendalikan acara onkeydown:

<code class="javascript">document.onkeydown = function (e) { ShowSelection(); };</code>

Butang dengan input Tag:

Walaupun pendekatan ini berfungsi untuk butang yang dilukis menggunakan tag li, ia mungkin tidak berfungsi dengan betul untuk butang yang dilukis menggunakan tag input. Untuk kes kedua, penyelesaian alternatif wujud, seperti menggunakan acara onfocus dan onblur untuk mengekalkan pemilihan.

Dengan melaksanakan kod yang disediakan, pembangun boleh menangkap dan memaparkan teks yang dipilih dengan berkesan daripada kawalan kotak teks, memastikan kelancaran pengalaman pengguna merentas penyemak imbas yang berbeza.

Atas ialah kandungan terperinci Cara Menangkap Teks Terpilih daripada Kotak Teks dalam JavaScript: Penyelesaian Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!