Bagaimana untuk Memasukkan Teks pada Kedudukan Kursor dalam Kawasan Teks menggunakan JavaScript?

Memasukkan Teks pada Kedudukan Kursor dengan Javascript/jQuery

Dalam pembangunan web, menambah teks di mana kursor diletakkan boleh meningkatkan pengalaman pengguna. Satu senario termasuk membenarkan pengguna memasukkan teks pratakrif dengan lancar ke dalam kotak teks apabila mengklik pautan.

Memasukkan Teks pada Kedudukan Kursor

Untuk memasukkan teks pada kedudukan kursor, kami boleh menggunakan fungsi JavaScript berikut:

function insertAtCaret(areaId, text) {
  // Get the textarea element
  var txtarea = document.getElementById(areaId);

  // Check if the element exists
  if (!txtarea) {
    return;
  }

  // Determine the browser type (Internet Explorer or others)
  var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
    "ff" : (document.selection ? "ie" : false));

  // Calculate the cursor position
  var strPos = 0;
  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;
  }

  // Create a string that consists of the text before, after, and the inserted text
  var front = (txtarea.value).substring(0, strPos);
  var back = (txtarea.value).substring(strPos, txtarea.value.length);
  txtarea.value = front + text + back;

  // Reset the cursor position after inserting the text
  strPos = strPos + text.length;
  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();
  }
}

Contoh Penggunaan

Kod HTML dan JavaScript berikut menunjukkan cara menggunakan fungsi insertAtCaret():

<textarea>

Atas ialah kandungan terperinci Bagaimana untuk Memasukkan Teks pada Kedudukan Kursor dalam Kawasan Teks menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!