Bagaimana untuk Menetapkan Kedudukan Karet secara Pengaturcaraan dalam Elemen Boleh Diedit Kandungan?

Menetapkan Kedudukan Karet dalam Elemen Boleh Sunting Kandungan

Menetapkan kedudukan karet dalam div boleh diedit kandungan boleh dicapai menggunakan objek Julat dan Pemilihan. Begini cara untuk menetapkan karet kepada kedudukan tertentu dalam elemen:

Kod:

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

Penjelasan:

• el mewakili elemen boleh diedit kandungan.
• julat ialah objek Julat yang digunakan untuk menentukan kedudukan karet.
• sel ialah Objek pilihan yang digunakan untuk memanipulasi pemilihan.
• setStart() menetapkan permulaan julat kepada nod dan ofset yang ditentukan (masing-masing el.childNodes[2] dan 5).
• runtuhkan( ) meruntuhkan julat kepada satu titik pada kedudukan mula.
• removeAllRanges() mengalih keluar mana-mana yang sedia ada pilihan.
• addRange() menambah julat yang dibuat pada pilihan.

Contoh:

Pertimbangkan HTML berikut:

<div>

Apabila anda mengklik butang "fokus", fungsi JavaScript setCaret() digunakan, meletakkan karet pada aksara kelima baris kedua teks.

Atas ialah kandungan terperinci Bagaimana untuk Menetapkan Kedudukan Karet secara Pengaturcaraan dalam Elemen Boleh Diedit Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!