Bagaimana untuk Meletakkan Karet pada Penghujung Elemen Boleh Diedit?

Penempatan Caret dalam Elemen Boleh Diedit Isi: Panduan Komprehensif

Menggerakkan kursor ke penghujung elemen boleh diedit kandungan boleh menjadi tugas yang mencabar. Tidak seperti elemen input tradisional, entiti boleh diedit kandungan tidak mempunyai sifat sedia ada untuk memfokuskan kursor pada penghujung secara lalai.

Cadangan Geowa4: Kefungsian Terhad

Manakala penyelesaian disediakan oleh Geowa4 mungkin berkesan untuk kawasan teks, ia gagal menangani keperluan khusus elemen boleh diedit kandungan. Untuk mengalihkan karet dengan berkesan ke penghujung elemen sedemikian, pendekatan yang disesuaikan diperlukan.

Penyelesaian Cadangan: Keserasian Merentas Pelayar

Coretan kod di bawah menawarkan yang mantap penyelesaian yang berfungsi dengan lancar merentas semua penyemak imbas utama yang menyokong elemen boleh diedit kandungan. Pendekatan ini memanfaatkan kuasa API Julat untuk memilih dan memanipulasi kedudukan kursor dengan bijak.

function setEndOfContenteditable(contentEditableElement) {
  var range, selection;
  if (document.createRange) { // Firefox, Chrome, Opera, Safari, IE 9+
    range = document.createRange(); // Create a range (a range is like the selection but invisible)
    range.selectNodeContents(contentEditableElement); // Select the entire contents of the element with the range
    range.collapse(false); // Collapse the range to the end point. False means collapse to end rather than the start
    selection = window.getSelection(); // Get the selection object (allows you to change selection)
    selection.removeAllRanges(); // Remove any selections already made
    selection.addRange(range); // Make the range you have just created the visible selection
  } else if (document.selection) { // IE 8 and lower
    range = document.body.createTextRange(); // Create a range (a range is a like the selection but invisible)
    range.moveToElementText(contentEditableElement); // Select the entire contents of the element with the range
    range.collapse(false); // Collapse the range to the end point. False means collapse to end rather than the start
    range.select(); // Select the range (make it the visible selection)
  }
}

Contoh Penggunaan:

Untuk mengalihkan karet ke penghujung dengan mudah daripada elemen boleh diedit kandungan, hanya panggil fungsi setEndOfContenteditable() dengan elemen yang diingini sebagai hujah.

elem = document.getElementById('txt1'); // This is the element that you want to move the caret to the end of
setEndOfContenteditable(elem);

Penyelesaian ini menyediakan cara yang komprehensif dan boleh dipercayai untuk memanipulasi kedudukan kursor dalam elemen boleh diedit kandungan, memastikan tingkah laku yang konsisten merentas semua pelayar utama.

Atas ialah kandungan terperinci Bagaimana untuk Meletakkan Karet pada Penghujung Elemen Boleh Diedit?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!