Mengatur pilihan teks di browser: Cukup gunakan setBaseandextent

29 September 2022 [JavaScript, Programming]

API seleksi membingungkan dan aneh.

Tapi, inilah yang saya temukan: Cukup gunakan SetBaseAndextend, dan ketika (jarang) dibutuhkan, diperpanjang.

Ringkasan

Setiap pilihan di browser terdiri dari:

• “jangkar” – awal, di mana Anda mulai menyeret, dan
• “Fokus” – Akhir, di mana Anda berhenti menyeret, dan di mana kursor Anda berada

Untuk memilih beberapa teks di browser, temukan node dari dan ke dom yang Anda inginkan, dan seberapa jauh Anda ingin menjadi, dan mengatur pilihan seperti ini:

const sel = document.getSelection();
sel.setBaseAndExtent(from_node, from_offset, to_node, to_offset);

Jika Anda hanya ingin kursor dengan tidak ada yang dipilih, gunakan simpul yang sama dan offset untuk baik dari dan ke.

Internet memiliki banyak resep yang melibatkan pembuatan rentang dan menambahkannya ke pilihan, tetapi tidak perlu melakukannya.

Menemukan dari dan ke node

Ketika lokasi berada di dalam node teks di DOM, mudah untuk menemukan dari dan ke node – mereka hanya node teks, dan offset adalah berapa banyak unit kode UTF -16 melalui teks yang Anda inginkan. [Not sure what a code unit is? See my video Interesting Characters].

“Tapi bukankah kursormu selalu dalam simpul teks?”

Tidak – misalnya, ketika saya memiliki dua
di sebelah satu sama lain, dan saya ingin kursor berada di antara mereka (jadi itu ada di garis kosong). Dalam hal ini tidak ada node teks, dan browser menanganinya dengan aneh.

Di Firefox, ketika kursor saya berada di antara dua node BR, node diatur ke tag (misalnya A div) yang berisi BRS, dan offset adalah indeks dari simpul BR kedua dalam daftar.

Browser lain mungkin melakukannya secara berbeda.

Begitu juga berharap bahwa node mungkin bukan node teks, dan di mana itu masalahnya, offset akan menjadi indeks salah satu dari anak -anak mereka.

Untuk memilih baris kosong (antara dua BRs) Anda sebenarnya dapat menentukan Node BR secara langsung, dan memberikan nomor indeks 0, dan itu berfungsi juga. Tapi, itu tidak cocok dengan apa yang ditetapkan browser ketika Anda mengklik pada garis kosong, jadi saya tidak dapat menjamin itu berfungsi persis sama.

Pilihan mundur

Lalat di salep adalah pilihan mundur: Saat Anda mengklik dan menyeret mouse dari kanan ke kiri, pilihan yang dibuat di browser mundur: jangkar ada di sebelah kanan dan fokusnya ada di sebelah kiri.

Namun, jika Anda memanggil SetBaseand Exportent yang mencoba mengatur pilihan seperti itu, fokus dan jangkar akan ditukar sehingga jangkar ada di sebelah kiri, dan fokusnya ada di sebelah kanan.

Tapi jangan pernah takut! Kami dapat menggunakan Extle untuk memaksa seleksi menjadi apa yang kami inginkan:

const sel = document.getSelection();
sel.setBaseAndExtent(from_node, from_offset, from_node, from_offset);
sel.extend(to_node, to_offset);

Pekerjaan selesai.

Pergi lebih dalam

Untuk info lebih lanjut, lihat halaman demo saya: Inventaris Pilihan Browser.