Bagaimanakah Saya Boleh Memasukkan Teks pada Kedudukan Kursor dalam Kotak Teks Menggunakan JavaScript atau jQuery?

Memasukkan Teks pada Kursor Menggunakan JavaScript/jQuery

Ia adalah perkara biasa untuk menghadapi senario di mana anda perlu memasukkan teks secara dinamik ke dalam kotak teks di mana kursor berada pada masa ini. Sama ada anda sedang membangunkan borang web atau membina antara muka interaktif, fungsi ini terbukti tidak ternilai.

Syukurlah, memanfaatkan JavaScript atau jQuery, anda boleh menyuntik teks dengan mudah pada kedudukan kursor, walaupun dalam elemen bukan kotak teks. Begini caranya:

Penyelesaian JavaScript

Fungsi JavaScript berikut, disesuaikan daripada sumber yang bereputasi, membolehkan anda memasukkan teks pada kursor dalam mana-mana kawasan teks:

function insertAtCaret(areaId, text) {
  // Retrieve the text area element
  var txtarea = document.getElementById(areaId);
  if (!txtarea) {
    return;
  }

  // Save the current scroll position
  var scrollPos = txtarea.scrollTop;

  // Determine the cursor position based on browser support
  var strPos = 0;
  var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
    "ff" : (document.selection ? "ie" : false));
  if (br == "ie") {
    txtarea.focus();
    var range = document.selection.createRange();
    range.moveStart('character', -txtarea.value.length);
    strPos = range.text.length;
  } else if (br == "ff") {
    strPos = txtarea.selectionStart;
  }

  // Split the text area value into front and back parts
  var front = (txtarea.value).substring(0, strPos);
  var back = (txtarea.value).substring(strPos, txtarea.value.length);

  // Insert the text into the cursor position
  txtarea.value = front + text + back;
  strPos = strPos + text.length;

  // Update the cursor position based on browser support
  if (br == "ie") {
    txtarea.focus();
    var ieRange = document.selection.createRange();
    ieRange.moveStart('character', -txtarea.value.length);
    ieRange.moveStart('character', strPos);
    ieRange.moveEnd('character', 0);
    ieRange.select();
  } else if (br == "ff") {
    txtarea.selectionStart = strPos;
    txtarea.selectionEnd = strPos;
    txtarea.focus();
  }

  // Restore the scroll position
  txtarea.scrollTop = scrollPos;
}

Penggunaan

Untuk menggunakan ini fungsi, ikut langkah berikut:

1. HTML: Cipta elemen kawasan teks dengan ID.

   <textarea>

2. JavaScript: Panggil fungsi insertAtCaret apabila peristiwa yang diingini berlaku, seperti mengklik pautan.

   document.getElementById("myLink").addEventListener("click", function() {
     insertAtCaret("textareaid", "text to insert");
   });

Penghadan

Walaupun penyelesaian ini kukuh, adalah penting untuk ambil perhatian bahawa penyelesaian ini mungkin tidak berfungsi dengan sempurna dalam semua situasi, terutamanya apabila berurusan dengan elemen bukan kotak teks. Terpulang kepada anda untuk menentukan sama ada pendekatan ini selaras dengan keperluan khusus anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memasukkan Teks pada Kedudukan Kursor dalam Kotak Teks Menggunakan JavaScript atau jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!