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!