Bagaimanakah Saya Boleh Meletakkan Karet Secara Pengaturcaraan dalam Elemen Boleh Suntingan Kandungan?

Meletakkan Karet pada Kedudukan Tertentu dalam Elemen Boleh Diedit Kandungan

Apabila berurusan dengan elemen boleh diedit kandungan, keupayaan untuk menetapkan kursor (karet) untuk kedudukan tertentu boleh menjadi penting. Walau bagaimanapun, untuk mencapai ini mungkin tidak mudah.

Dalam kebanyakan penyemak imbas web, menggunakan objek Julat dan Pemilihan adalah kuncinya. Dengan menentukan setiap sempadan pilihan sebagai nod dan offset dalam nod itu, anda boleh mengawal peletakan karet.

Untuk menggambarkan, pertimbangkan contoh HTML mudah dengan div boleh diedit kandungan:

<div>
<p> Sekarang, bayangkan anda ingin meletakkan karet pada aksara kelima baris kedua teks. Untuk mencapai matlamat ini, ikuti langkah berikut:</p>
<ol>
<li>
<p><strong>Buat Objek Julat:</strong></p>
<pre class="brush:php;toolbar:false">var range = document.createRange();

Set Pemilihan Sempadan:

var myDiv = document.getElementById("editable");
range.setStart(myDiv.childNodes[2], 5);
range.collapse(true);

• myDiv.childNodes[2] merujuk kepada baris kedua teks.
• range.setStart() menetapkan permulaan julat pemilihan kepada aksara kelima dalam nod itu.
• julat.collapse(true) meruntuhkan julat kepada karet kedudukan.

Tetapkan Pilihan:

var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

• window.getSelection() mengembalikan objek Selection.
• sel.removeAllRanges() mengalih keluar mana-mana yang sedia ada pemilihan.
• sel.addRange(julat) menetapkan julat pilihan baharu.

Cetuskan Fungsi:
Lampirkan kod di atas kepada acara klik pada butang:

document.getElementById("button").addEventListener("click", setCaret);

Dengan mengikuti langkah-langkah ini, anda kini boleh menetapkan kedudukan karet secara pemrograman dalam elemen yang boleh diedit kandungan.