Kapan Boleh Menonaktifkan Pemilihan Teks?

Menggunakan CSS, dimungkinkan untuk mencegah pengguna memilih teks dalam elemen menggunakan user-select: none. Sekarang, bisa dimengerti mengapa hal itu bisa dianggap "kontroversial". Maksud saya, harus kita akan menonaktifkan perilaku pengguna standar? Secara umum, tidak, kita tidak seharusnya melakukan itu. Tetapi apakah menonaktifkan pemilihan teks memiliki beberapa kasus penggunaan yang sah (walaupun jarang)? Saya kira demikian.

Dalam artikel ini kita akan menjelajahi kasus penggunaan ini dan melihat bagaimana kita dapat menggunakan user-select: none untuk meningkatkan (tidak menghalangi) pengalaman pengguna. Juga tidak ada artinya bahwa user-select properti memiliki nilai lain selain none yang dapat digunakan untuk mengubah perilaku pemilihan teks daripada menonaktifkannya sepenuhnya, dan nilai lain yang bahkan menegakkan pemilihan teks, jadi kita juga akan melihat itu.

Mungkin user-select nilai-nilai

Mari kita mulai dengan berlari melalui yang berbeda user-select nilai dan apa yang mereka lakukan.

Menerapkan user-select: none; ke elemen berarti bahwa konten teks dan konten teks bersarangnya tidak akan dapat dipilih secara fungsional atau dapat dipilih secara visual (mis. ::selection tidak akan bekerja). Jika Anda membuat pilihan yang berisi beberapa konten yang tidak dapat dipilih, konten yang tidak dapat dipilih akan dihilangkan dari pilihan, jadi itu diterapkan dengan cukup baik. Dan dukungannya luar biasa.

Sebaliknya, user-select: text membuat konten dapat dipilih. Anda akan menggunakan nilai ini untuk menimpa user-select: none.

user-select: contain adalah salah satu yang menarik. Menerapkannya berarti bahwa jika suatu pilihan dimulai di dalam elemen maka itu harus berakhir di dalamnya juga, yang mengandungnya. Ini anehnya tidak berlaku saat seleksi dimulai sebelum elemen, bagaimanapun, yang mungkin mengapa saat ini tidak ada browser yang mendukungnya. (Internet Explorer dan versi Microsoft Edge sebelumnya mendukungnya dengan kedok user-select: element.)

Dengan user-select: all, memilih bagian dari konten elemen akan membuat semuanya dipilih secara otomatis. Itu semua atau tidak sama sekali, yang sangat tanpa kompromi tetapi berguna dalam keadaan di mana pengguna lebih cenderung menyalin konten ke clipboard mereka (misalnya berbagi dan menyematkan tautan, cuplikan kode, dll.). Alih-alih mengklik dua kali, pengguna hanya perlu mengklik sekali agar konten dapat dipilih secara otomatis.

Namun, berhati-hatilah, karena ini tidak selalu merupakan fitur yang Anda pikirkan. Bagaimana jika pengguna hanya ingin memilih bagian dari konten (misalnya hanya bagian nama font dari cuplikan Google Fonts atau satu bagian dari cuplikan kode)? Itu masih lebih baik untuk ditangani”menyalin ke clipboard” menggunakan JavaScript dalam banyak skenario.

Aplikasi yang lebih baik dari user-select: all adalah untuk memastikan bahwa kutipan disalin seluruhnya dan akurat.

Perilaku user-select: auto (nilai awal user-select) tergantung pada elemen dan cara penggunaannya. Anda dapat mengetahui lebih lanjut tentang ini di almanak kami.

Sekarang mari kita beralih ke menjelajahi kasus penggunaan untuk user-select: none...

Menghapus non-teks dari pilihan

Saat Anda menyalin konten dari halaman web, itu mungkin dari artikel atau jenis konten panjang lainnya, bukan? Anda mungkin tidak ingin pilihan Anda menyertakan gambar, emoji (yang terkadang dapat disalin sebagai teks, misalnya ":thinkingface:"), dan hal lain yang mungkin Anda harapkan akan terbungkus dalam <aside> elemen (misalnya ajakan bertindak dalam artikel, iklan, atau hal lain yang bukan bagian dari konten utama).

Untuk mencegah sesuatu dimasukkan ke dalam pilihan, pastikan itu dibungkus dalam elemen HTML dan kemudian terapkan user-select: none untuk itu:

<p>lorem <span style="user-select: none">🤔</span> ipsum</p>

<aside style="user-select: none">
  <h1>Heading</h1>
  <p>Paragraph</p>
  <a>Call to action</a>
</aside>

Dalam skenario seperti ini, kami tidak menonaktifkan pilihan, melainkan mengoptimalkan dia. Perlu juga disebutkan bahwa memilih tidak selalu berarti menyalin — banyak pembaca (termasuk saya) suka memilih konten saat mereka membacanya sehingga mereka dapat mengingat di mana mereka berada (seperti bookmark), alasan lain untuk mengoptimalkan daripada menonaktifkan sepenuhnya.

Mencegah pemilihan yang tidak disengaja

Mendaftar user-select: none ke tautan yang terlihat seperti tombol (mis <a href="/id/whatever" class="button">Click Me!</a>).

Tidak mungkin untuk memilih konten teks dari a <button> or <input type="submit"> karena, yah, mengapa Anda? Namun, perilaku ini tidak berlaku untuk tautan karena biasanya tautan tersebut merupakan bagian dari paragraf yang harus dapat dipilih.

Cukup adil.

Kita bisa berargumentasi bahwa membuat tautan terlihat seperti tombol adalah anti-pola, tapi apa pun. Itu tidak merusak internet, kan? Kapal itu telah berlayar, jadi jika Anda menggunakan tautan yang dirancang agar terlihat seperti tombol, maka tautan tersebut harus meniru perilaku tombol, tidak hanya untuk konsistensi tetapi untuk mencegah pengguna memilih konten secara tidak sengaja alih-alih memicu interaksi.

Saya tentu cenderung memilih hal-hal secara tidak sengaja karena saya menggunakan laptop saya di tempat tidur lebih dari yang saya akui. Selain itu, ada beberapa kondisi medis yang dapat memengaruhi kontrol dan koordinasi, mengubah klik yang diinginkan menjadi tarikan/pilihan yang tidak diinginkan, sehingga ada masalah aksesibilitas yang dapat diatasi dengan user-select juga.

Interaksi yang perlu diseret (secara sengaja) juga ada (misalnya di game browser), tetapi ini jarang terjadi. Tetap saja, itu hanya menunjukkan bahwa user-select sebenarnya memiliki beberapa kasus penggunaan.

Menghindari pencurian konten berbayar

Konten berbayar berpenghalang mendapat banyak kebencian, tetapi jika Anda merasa perlu melindungi konten Anda, itu adalah konten Anda — tidak ada yang berhak mencurinya hanya karena mereka tidak percaya bahwa mereka harus membayarnya.

Jika Anda ingin menempuh rute ini, ada banyak cara untuk mempersulit pengguna melewati paywalls (atau dengan cara yang sama, menyalin konten berhak cipta seperti karya orang lain yang diterbitkan).

Mengaburkan konten dengan CSS:

article { filter: blur(<radius>); }

Menonaktifkan pintasan keyboard untuk DevTools:

document.addEventListener("keydown", function (e) {
  if (e.keyCode == 123) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 73) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 74) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 85) e.preventDefault();
});

Menonaktifkan akses ke DevTools melalui menu konteks dengan menonaktifkan menu konteks itu sendiri:

document.addEventListener("contextmenu", e => e.preventDefault())

Dan tentu saja, untuk mencegah pengguna menyalin konten ketika mereka tidak diizinkan untuk membacanya di sumbernya, menerapkan user-select: none:

<article style="user-select: none">

Ada kasus penggunaan lain?

Itulah tiga kasus penggunaan yang dapat saya pikirkan untuk mencegah pemilihan teks. Beberapa orang lain terlintas di benak saya, tetapi semuanya tampak seperti peregangan. Tapi bagaimana denganmu? Apakah Anda harus menonaktifkan pemilihan teks pada apa pun? Saya ingin tahu!