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

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!