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

Patricia Arquette
Lepaskan: 2024-11-20 11:32:02
asal
923 orang telah melayarinya

How to Insert Text at the Cursor Position in a Text Area using 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();
  }
}
Salin selepas log masuk

Contoh Penggunaan

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

<textarea>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan