Bagaimana untuk Menetapkan Kedudukan Karet dalam Elemen Boleh Diedit?-tutorial js-php.cn

Bagaimana untuk Menetapkan Kedudukan Karet dalam Elemen Boleh Diedit?

Barbara Streisand

Lepaskan： 2024-12-14 08:55:10

asal

756 orang telah melayarinya

How to Set the Caret Position in a Contenteditable Element?

Tetapkan Kedudukan Karet dalam Elemen Boleh Diedit Kandungan

Dalam pembangunan web, anda mungkin menghadapi situasi di mana anda ingin mengawal kedudukan karet (kursor) dalam elemen yang boleh diedit kandungan, seperti editor teks atau medan input mesej. Ini membolehkan pengeditan tepat atau peletakan kursor di lokasi tertentu.

Untuk mencapai ini, anda boleh menggunakan objek Julat dan Pilihan dalam JavaScript. Berikut ialah contoh yang menunjukkan cara menetapkan kedudukan karet:

function setCaret() {
    var el = document.getElementById("editable");
    var range = document.createRange();
    var sel = window.getSelection();

    // Set the start position of the range at the beginning of the fifth character of the third line
    range.setStart(el.childNodes[2], 5);

    // Collapse the range to the start point
    range.collapse(true);

    // Set the selection to start at the start position of the range
    sel.removeAllRanges();
    sel.addRange(range);
}

Salin selepas log masuk

Dalam contoh ini, kami menganggap kewujudan

elemen dengan ID "boleh diedit" dan menjadikannya boleh diedit kandungan. Apabila anda mengklik butang, fungsi setCaret akan mengalihkan karet ke aksara kelima baris ketiga teks dalam elemen div boleh diedit kandungan.

Perhatikan bahawa pelaksanaan tepat kedudukan tanda tanda mungkin berbeza sedikit merentas pelayar yang berbeza. Walau bagaimanapun, pendekatan umum yang diterangkan di sini disokong secara meluas.

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