Bagaimana Anda Mengalihkan Karet ke Penghujung Elemen Boleh Diedit?

Menggerakkan Karet ke Penghujung Entiti Boleh Diedit Kandungan

Widget web tertentu, seperti nota Gmail, memerlukan keupayaan untuk menggerakkan kursor ke penghujung elemen yang boleh diedit kandungan. Walaupun penyelesaian wujud untuk mengendalikan input, ia gagal untuk elemen boleh diedit kandungan kerana sifatnya yang berbeza.

Untuk menangani cabaran ini, penyelesaian yang disesuaikan khusus untuk elemen boleh diedit kandungan diperlukan. Nasib baik, fungsi komprehensif wujud untuk memenuhi keperluan ini: setEndOfContenteditable(). Fungsi ini menggunakan penggunaan julat dan pilihan yang bijak untuk memanipulasi kandungan teks elemen boleh diedit, memastikan keserasian dengan pelbagai penyemak imbas.

Pelaksanaan:

Fungsi setEndOfContenteditable() beroperasi merentasi pelbagai pelayar versi:

• Pelayar Moden (Firefox, Chrome, Opera, Safari, IE 9 ):
  Menggunakan kaedah createRange() untuk mencipta julat yang tidak kelihatan meliputi keseluruhan elemen kandungan. Collapse() kemudiannya digunakan untuk mengalihkan titik akhir julat ke aksara akhir elemen. Akhir sekali, julat ditambahkan pada pilihan semasa.
• IE 8 dan Bawah:
  Menggunakan kaedah createTextRange() untuk mencipta julat halimunan meliputi keseluruhan kandungan elemen. Sekali lagi, kaedah collapse() digunakan untuk meletakkan titik akhir julat pada hujung elemen. Akhirnya, julat dipilih, menjadikannya pilihan baharu yang boleh dilihat.

Penggunaan:

Untuk menggunakan fungsi setEndOfContenteditable(), cuma dapatkan elemen sasaran dan gunakannya:

elem = document.getElementById('txt1'); // Element to move the caret to the end of
setEndOfContenteditable(elem);

Teknik ini dengan cekap menggerakkan karet ke penghujung elemen yang boleh diedit kandungan, tanpa mengira versi penyemak imbas atau panjang kandungan unsur.

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