Bagaimanakah Saya Boleh Menetapkan Kedudukan Karet dengan Tepat dalam Div Boleh Diedit Kandungan?

Menetapkan Kedudukan Karet dalam Elemen yang boleh diedit kandungan

Mensasarkan untuk mewujudkan karet pada lokasi yang tepat dalam elemen div boleh diedit boleh menjadi satu tugas yang mencabar . Mencari bantuan daripada komuniti dalam talian, anda mungkin telah menemui penyelesaian JavaScript yang serupa dengan yang di bawah:

const range = document.createRange();
const myDiv = document.getElementById("editable");
range.setStart(myDiv, 5);
range.setEnd(myDiv, 5);

Walau bagaimanapun, walaupun wujudnya dalam repositori pengetahuan web, pendekatan ini telah terbukti tidak berkesan dalam kedua-dua Firefox dan Chrome .

Merangkul Julat dan Objek Pilihan

Untuk membetulkan keadaan, membuka kunci potensi objek Julat dan Pemilihan adalah penting. Objek ini berfungsi sebagai penjaga pintu untuk mengawal dengan tepat peletakan karet.

Untuk menggambarkan penggunaannya, mari kita alihkan karet ke aksara kelima baris kedua teks. Begini cara ia boleh dicapai:

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)
}

Pelaksanaan HTML

Untuk menyepadukan sepenuhnya penyelesaian ini, masukkan HTML berikut dalam kod anda:

<div>

Dengan pelaksanaan ini, mengklik butang dengan tepat meletakkan karet dalam div boleh diedit, memberikan anda kawalan rapi ke atas penempatannya.

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