Mengatur Nilai Seleksi HTML Menggunakan userSelect Style DOM
Properti UserSelect Style DOM pada HTML digunakan untuk mengatur atau mengembalikan nilai seleksi pada sebuah teks apakah dapat dilakukan (seleksi) atau tidak oleh user.
Sebelum memahami lebih dalam materi tentang Mengatur Nilai Seleksi HTML Menggunakan userSelect Style DOM, terlebih dahulu pelajari materi tentang: Properti unicodeBidi Style HTML DOM dan Fungsinya, Mengatur Jeda Transisi HTML Menggunakan transitionDelay Style DOM, dan Mengatur Transisi Waktu HTML Menggunakan transitionTimingFunction Style DOM.
Sintak:
Property Values:
Return Values: Berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan apakah sebuah teks dari elemen dapat diseleksi atau tidak.
Sebelum memahami lebih dalam materi tentang Mengatur Nilai Seleksi HTML Menggunakan userSelect Style DOM, terlebih dahulu pelajari materi tentang: Properti unicodeBidi Style HTML DOM dan Fungsinya, Mengatur Jeda Transisi HTML Menggunakan transitionDelay Style DOM, dan Mengatur Transisi Waktu HTML Menggunakan transitionTimingFunction Style DOM.
Sintak:
- Digunakan untuk mengembalikan nilai properti userSelect: object.style.userSelect
- Digunakan untuk mengatur nilai properti userSelect: object.style.userSelect = "auto | none | text | all"
Property Values:
- auto: Merupakan nilai default dari properti yang digunakan untuk membuat user dapat melakukan select pada teks.
- none: Digunakan untuk mencegah teks seleksi dari user. Atau dengan kata lain, user tidak dapat melakukan seleksi teks yang dituju oleh user tersebut.
- text: Digunakan untuk memberikan pengaturan enable kepada user untuk melakukan seleksi teks, namun tidak menyediakan pencegahan teks seleksi dari user itu sendiri.
- all: Digunakan untuk melakukan seleksi teks dengan satu kali klik saja pada mouse.
Return Values: Berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan apakah sebuah teks dari elemen dapat diseleksi atau tidak.
Contoh:
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style user-select DOM
pada HTML
</title>
<style>
div
{
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
h1,h3
{
color: green;
font-size: 30px;
}
body
{
text-align: center;
}
</style>
</head>
<body>
<h1>
Blog Elfan
</h1>
<h3>
Properti Style UserSelect DOM
pada HTML
</h3>
<div id="FDD">
Blog TIK merupakan portal ilmu
komputer.
</div>
<br>
<button
onclick="myBoon2s()">
Submit
</button>
<script>
function myBoon2s()
{
var x = document.getElementById("FDD");
// Chrome, Safari, Opera
x.style.WebkitUserSelect = "none";
// Firefox
x.style.MozUserSelect = "none";
// IE 10+
x.style.msUserSelect = "none";
// Standar syntax
x.style.userSelect = "none";
}
</script>
</body>
</html>
Output:
Blog Elfan
Properti Style UserSelect DOM pada HTML
Blog TIK merupakan portal ilmu komputer.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style user-select DOM
pada HTML
</title>
<style>
h1, h3
{
color: green;
font-size: 30px;
}
body
{
text-align: center;
}
</style>
</head>
<body>
<h1>
Blog Elfan
</h1>
<h3>
Properti Style UserSelect DOM
</h3>
<div
id="BB2"
style="user-select:auto;">
Blog TIK merupakan portal ilmu
komputer.
</div>
<br>
<button
onclick="myDon2s()">
Submit
</button>
<script>
function myDon2s()
{
alert(document.getElementById(
"BB2").style.userSelect);
}
</script>
</body>
</html>
Output:
Blog Elfan
Properti Style UserSelect DOM
Blog TIK merupakan portal ilmu komputer.
Catatan: Lakukan double klik pada beberap teks yang akan diseleksi, namun setelah dilakukan, properti ini tidak dapat melakukan hal sebaliknya.
Baca Juga:
Pengaturan nilai seleksi pada halaman web merupakan aspek yang penting dalam pengalaman pengguna. Salah satu cara untuk mengatur bagaimana teks dapat dipilih oleh pengguna adalah dengan menggunakan properti userSelect pada gaya pengaturan dokumen objek model DOM. Properti ini berfungsi untuk mengendalikan apakah teks dalam elemen tertentu dapat diseleksi atau tidak, memberikan kontrol lebih dalam pengaturan interaksi pengguna dengan konten halaman. Properti ini sangat berguna dalam menciptakan desain antarmuka pengguna yang lebih interaktif dan sesuai dengan kebutuhan spesifik.
Properti userSelect pada elemen HTML memungkinkan pengembang untuk menentukan apakah teks dalam elemen tersebut bisa dipilih dengan cara menyeret kursor atau tidak. Secara default, sebagian besar elemen di halaman web membolehkan teks diseleksi, yang memungkinkan pengguna untuk menyalin teks atau melakukan pencarian berdasarkan teks yang dipilih. Namun, dalam beberapa kasus, pengembang mungkin ingin mencegah pengguna untuk memilih teks, misalnya pada elemen-elemen seperti gambar atau elemen yang dirancang khusus untuk tampilan tanpa interaksi teks.
Pada elemen tertentu, pengaturan userSelect dapat berguna untuk memperbaiki tampilan dan pengalaman pengguna. Salah satu contoh penerapan yang sering digunakan adalah untuk menghindari pemilihan teks yang tidak diinginkan dalam elemen-elemen yang bersifat dekoratif atau interaktif, seperti tombol atau gambar yang memiliki efek visual tertentu. Dengan menggunakan properti ini, elemen-elemen tersebut tetap dapat berfungsi sesuai fungsinya tanpa mengganggu pengalaman visual pengguna.
Ada beberapa nilai yang dapat digunakan untuk mengatur properti userSelect pada elemen HTML. Salah satu nilai yang paling umum digunakan adalah "none", yang akan menghalangi pengguna untuk memilih teks dalam elemen tersebut. Nilai ini berguna ketika elemen tersebut tidak dimaksudkan untuk dapat disalin atau dipilih, seperti elemen navigasi atau elemen media yang bersifat statis. Pengaturan seperti ini bisa membuat tampilan halaman lebih bersih dan meminimalkan gangguan pengguna yang tidak diinginkan.
Selain itu, terdapat juga nilai "text", yang memungkinkan teks dalam elemen tetap bisa diseleksi seperti pada kebanyakan elemen teks lainnya. Pengaturan ini adalah pengaturan default, yang berarti bahwa teks dalam elemen tersebut akan tetap dapat dipilih dengan menyeret kursor pada teks. Nilai ini sangat berguna ketika elemen diinginkan agar tetap interaktif dalam hal pemilihan teks, seperti pada elemen teks yang memungkinkan pengguna untuk menyalin atau berbagi informasi.
Ada pula nilai "contain", yang memberikan pengaturan dimana pemilihan teks hanya dapat dilakukan dalam konteks elemen yang lebih besar. Dalam pengaturan ini, elemen-elemen yang berada di dalam elemen yang lebih besar yang memiliki nilai userSelect set ke "contain" akan tetap dapat dipilih, meskipun elemen tersebut secara keseluruhan tidak bisa dipilih. Pengaturan ini memberikan kontrol lebih spesifik untuk elemen-elemen yang diinginkan agar tetap interaktif dalam lingkup tertentu tanpa memberikan kebebasan untuk memilih seluruh teks di dalam elemen.
Penggunaan userSelect pada elemen HTML juga memberikan manfaat dari sisi aksesibilitas dan keterjangkauan antarmuka. Dengan membatasi kemampuan untuk memilih teks pada elemen-elemen tertentu, pengembang dapat menciptakan desain yang lebih terstruktur dan menghindari pengalaman pengguna yang membingungkan, misalnya dalam kasus dimana teks yang tidak relevan atau berlebihan dipilih oleh pengguna secara tidak sengaja. Hal ini juga penting untuk menciptakan antarmuka pengguna yang ramah perangkat sentuh, dimana interaksi pengguna lebih sering melibatkan gesekan atau penekanan daripada pemilihan teks.
Meski demikian, penggunaan properti userSelect harus dilakukan dengan hati-hati. Menghalangi pemilihan teks pada elemen-elemen yang seharusnya dapat disalin atau dibaca dengan mudah oleh pengguna bisa berdampak negatif terhadap pengalaman pengguna. Hal ini bisa terjadi pada elemen-elemen seperti artikel, formulir, atau konten lain yang penting untuk aksesibilitas. Oleh karena itu, penting untuk mempertimbangkan konteks dan kebutuhan pengguna sebelum memutuskan untuk membatasi pemilihan teks pada elemen-elemen tertentu.
Selain fungsinya dalam mengatur interaksi dengan teks, pengaturan userSelect juga dapat membantu menciptakan desain halaman web yang lebih bersih dan terorganisir. Misalnya, dalam hal elemen-elemen yang bersifat dekoratif, pengaturan ini bisa memastikan bahwa desain tidak terganggu oleh teks yang tidak relevan atau tidak perlu dipilih. Elemen-elemen seperti latar belakang, elemen interaktif, dan elemen grafis lainnya bisa lebih difokuskan pada visual dan fungsi tanpa harus khawatir tentang gangguan pemilihan teks yang tidak disengaja.
Pengaturan properti userSelect dalam gaya dokumen objek model juga memungkinkan pengembang untuk menjaga konsistensi desain di seluruh halaman. Dalam beberapa kasus, pengaturan ini diterapkan pada seluruh halaman atau pada elemen-elemen tertentu yang memiliki tujuan tertentu. Hal ini memastikan bahwa elemen-elemen yang bersifat interaktif tetap dapat dipilih dengan mudah, sementara elemen-elemen lain yang tidak diinginkan untuk dipilih tetap memiliki pengaturan yang sesuai. Melalui pendekatan ini, pengembang dapat mengendalikan elemen mana yang dapat diseleksi dan mana yang tidak, sesuai dengan kebutuhan desain dan interaksi pengguna.
Meskipun properti userSelect memberikan kontrol yang lebih baik terhadap interaksi dengan teks di halaman web, pengembang harus selalu mempertimbangkan berbagai aspek desain dan pengalaman pengguna. Pengaturan ini sebaiknya digunakan dengan bijak, mengingat bahwa kemampuan untuk memilih teks memiliki banyak kegunaan yang penting bagi pengguna, termasuk menyalin informasi, mencari teks, dan berbagi konten. Karena itu, penggunaan properti ini harus mempertimbangkan baik fungsi fungsionalitas elemen maupun kenyamanan pengguna dalam berinteraksi dengan halaman web.
Penting untuk diingat bahwa meskipun properti userSelect memberikan kontrol terhadap kemampuan pemilihan teks, hal ini tidak berarti bahwa elemen-elemen lain di halaman web menjadi sepenuhnya tidak interaktif. Sebaliknya, dengan menggunakan pengaturan ini, pengembang dapat menyesuaikan tingkat interaksi dengan elemen teks dan konten lain sesuai dengan tujuan desain halaman tersebut. Dalam banyak kasus, pengaturan ini bisa membantu menciptakan pengalaman pengguna yang lebih lancar dan lebih terfokus, dengan meminimalkan gangguan dan meningkatkan konsistensi antar elemen.
Secara keseluruhan, properti userSelect memberikan manfaat besar dalam hal pengendalian pemilihan teks dalam halaman web. Dengan memahami cara menggunakan pengaturan ini dengan tepat, pengembang dapat menciptakan halaman yang lebih terorganisir dan lebih mudah diakses, dengan interaksi pengguna yang lebih sesuai dengan kebutuhan desain dan tujuan fungsional halaman tersebut.
Referensi Tambahan:
- 4 Value Properti wordSpacing Style DOM pada HTML
- 4 Value Properti wordWrap Style DOM pada HTML
- 4 Value Properti zIndex Style DOM pada HTML
- Penggunaan Properti window.closed DOM pada HTML
- Penggunaan Properti window.defaultStatus DOM pada HTML
- Penggunaan Properti window.frameElement DOM pada HTML
- Penggunaan Properti Frame Window DOM pada HTML
Artikel ini akan dibaca oleh: Intan Iswara, Intan Putri Amarilis, Isaac Musaivan Insan Fisabilillah, Ishika Sufa Andori, dan Jihan Nabila Wafa'.
5 komentar untuk "Mengatur Nilai Seleksi HTML Menggunakan userSelect Style DOM"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
Bro, ada browser apa saja yang dapat digunakan untuk mengaktifkan properti UserSelect Style DOM pada HTML?
BalasHapusAda beberapa bro, berikut ini dalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti UserSelect Style DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Opera
5. Safari
Apa yang dimaksud dengan properti userSelect DOM pada HTML?
BalasHapusProperti userSelect DOM pada HTML merupakan properti yang digunakan untuk menetapkan atau mengembalikan nilai apakah teks elemen dapat dipilih atau tidak.
HapusJika user melakukan klik dua kali pada beberapa teks yang menggunakan properti userSelect, maka teks tersebut akan disorot atau dipilih.
Hapus