Rumah >hujung hadapan web >tutorial js >Bagaimanakah Saya Boleh Mengawal Kedudukan Karet dengan Tepat dalam Div Boleh Diedit?

Bagaimanakah Saya Boleh Mengawal Kedudukan Karet dengan Tepat dalam Div Boleh Diedit?

Susan Sarandon
Susan Sarandonasal
2024-12-11 05:05:13355semak imbas

How Can I Precisely Control Caret Position in a Contenteditable Div?

Kedudukan Karet dalam Elemen Boleh Diedit Isi

Berusaha untuk memanipulasi kedudukan karet dalam div boleh diedit kandungan, banyak percubaan telah dibuat untuk memanfaatkan Julat dan Objek pemilihan dengan tahap kejayaan yang berbeza-beza. Walau bagaimanapun, usaha baru-baru ini telah menemui kaedah yang tepat untuk menetapkan peletakan kursor:

Menetapkan Karet kepada Karakter Tertentu

Dalam pelayar seperti Firefox dan Chrome, hasil yang diinginkan boleh dicapai dengan menggunakan kod berikut:

function setCaret() {
    var el = document.getElementById("editable")
    var range = document.createRange()
    var sel = window.getSelection()
    
    range.setStart(el.childNodes[2], 5)
    range.collapse(true)
    
    sel.removeAllRanges()
    sel.addRange(range)
}

Dalam kod ini, kursor ialah diletakkan pada aksara kelima baris kedua teks dalam div boleh diedit dengan id "boleh diedit." Ini dicapai dengan menentukan nod sasaran (el.childNodes[2]) dan kedudukan offset (5) dalam nod itu untuk kedua-dua titik mula dan akhir julat.

Memperhalusi Kedudukan

Untuk ketepatan maksimum, nod dan offset tambahan boleh disertakan dalam kod untuk mengecilkan peletakan kursor kepada aksara tertentu dalam unsur bersarang atau pun dalam perkataan tertentu. Tahap kawalan ini membolehkan manipulasi kursor lancar dalam struktur HTML yang kompleks.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengawal Kedudukan Karet dengan Tepat dalam Div Boleh Diedit?. 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