Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimanakah Saya Mendapatkan Kedudukan Karet dalam Elemen Boleh Diedit Kandungan?

Bagaimanakah Saya Mendapatkan Kedudukan Karet dalam Elemen Boleh Diedit Kandungan?

DDD
DDDasal
2024-11-21 13:55:05978semak imbas

How Do I Get the Caret Position in a ContentEditable Element?

Dapatkan Kedudukan Karet yang Boleh Diedit Kandungan

Menentukan kedudukan karet semasa dalam unsur yang boleh diedit kandungan boleh menjadi penting untuk pelbagai tugas penyuntingan. Tidak seperti menetapkan kedudukan karet, mendapatkan lokasi semasanya memerlukan pendekatan yang lebih rumit.

Coretan kod yang disediakan menganggap senario mudah dengan satu nod teks yang disertakan dalam div Boleh Diedit kandungan. Jika sifat ruang putih CSS div ditetapkan kepada pra, pendekatan yang lebih canggih diperlukan.

Pelaksanaan

Fungsi getCaretPosition mendapatkan semula kedudukan karet menggunakan teknik berbeza bergantung pada penyemak imbas:

  • Untuk pelayar moden yang menyokong window.getSelection(), offset akhir julat digunakan untuk menentukan kedudukan karet.
  • Untuk penyemak imbas lama yang menggunakan document.selection, elemen tambahan dimasukkan untuk mengira kedudukan karet.

Penggunaan

Dalam contoh kod HTML dan JavaScript yang disediakan, fungsi kemas kini sentiasa mengemas kini kedudukan caret dipaparkan dalam div #caretposition. Dengan mendengar acara tetikus (mousedown, mouseup) dan acara papan kekunci (keydown, keyup), kedudukan karet ditangkap dan dipaparkan dalam masa nyata apabila pengguna berinteraksi dengan elemen kandungan Boleh Diedit, memberikan pemahaman yang tepat tentang peletakan kursor semasa.

Pertimbangan Tambahan

Jika anda menghadapi situasi di mana kandungan boleh diedit mempunyai elemen bersarang, rujuk kaedah alternatif yang diterangkan dalam jawapan berpaut untuk pendekatan yang lebih komprehensif. Penyelesaian ini mengendalikan senario kandungan kompleks dengan lebih berkesan.

Atas ialah kandungan terperinci Bagaimanakah Saya Mendapatkan Kedudukan Karet dalam Elemen Boleh Diedit Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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