Cara menggunakan disable javascript edge

Kita dapat menggunakan property user options di CSS untuk disable text selection highlighting di halaman HTML. Ini bukan fitur standar, tetapi tersedia di semua browser modern kecuali IE 9 & sebelumnya.

Menggunakan user options: none

Untuk disable text selection dalam HTML, kita perlu memberikan nilai user-selected property value as none. Lihat melalui contoh di bawah ini untuk memahami jika lebih lanjut.

<div>
Anda dapat memilih teks ini.
</div>
<div class="disable-select">
Anda tidak dapat memilih teks ini, pemilihan teks dinonaktifkan
</div>

Pertama Saya telah menambahkan class disable-select ke div, kedua sekarang saya akan menambahkan property css user-select:

.disable-select {
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}

Tetapi kita harus menambahkan awalan khusus browser sebelum opsi yang dipilih pengguna untuk safari, firefox dan internet explorer atau edge.

Untuk browser google Chrome dan opera mendukung versi tanpa awalan.

Di Google Chrome

Untuk menonaktifkan penyorotan pemilihan teks (disable text selection highlighting) di browser Google Chrome menggunakan CSS cukup setel property -user-select CSS ke none.

Dan tidak ada awalan yang diperlukan untuk Google Chrome dan Opera Browser.

 .disable-select{
  user-select:none;
}

Di mozila firefox

Untuk menonaktifkan penyorotan pemilihan teks (disable text selection highlighting) di browser mozilla firefox menggunakan CSS cukup setel properti CSS -moz-user-select ke none.

Dan kita perlu menambahkan awalan -moz sebelum properti yang dipilih pengguna untuk Browser mozilla firefox.

 .disable-select{
   -moz-user-select:none;
}

Di Safari

Untuk menonaktifkan penyorotan pemilihan teks di browser Safari menggunakan CSS, cukup setel properti CSS -webkit-user-select ke none.

Dan kita perlu menambahkan awalan -webkit sebelum properti yang dipilih pengguna untuk Browser Safari.

 .disable-select{
  -webkit-user-select:none;
}

Di iOS Safari

Untuk menonaktifkan penyorotan pemilihan teks di browser Safari iOS menggunakan CSS, cukup setel properti CSS -webkit-touch-callout ke none.

 .disable-select{
  -webkit-touch-callout:none;
}

Di Internet Explorer/Edge

Untuk menonaktifkan penyorotan pemilihan teks di browser Internet Explorer/Edge menggunakan CSS cukup setel properti CSS -ms-user-select ke none.

Dan kita perlu menambahkan awalan -ms sebelum properti yang dipilih pengguna untuk Internet Explorer/Edge.

 .disable-select{
   -ms-user-select:none;
}

Apa yang akan dilakukan oleh property user-select?

property css user-select mengontrol apakah teks dalam elemen HTML dapat dipilih atau tidak. Ini bukan fitur standar.

Anda dapat menemukan detail lebih lanjut tentang spesifikasi draf .

user-select property values

user-select none

Seperti dijelaskan di atas, ketika kami memberikan nilai properti user-select : none ke elemen HTML, kami tidak dapat memilih teks di dalam element termasuk elemen turunannya.

<div style="user-select:none;border:1px solid">
pemilihan teks dinonaktifkan
<div>Pemilihan teks dinonaktifkan di elemen anak juga</div>
</div>

user-select text

Saat Anda memberikan property user-select : text, pengguna dapat memilih teks.

<div style="user-select: none; border: 1px solid;">
pemilihan teks dinonaktifkan
<div style="user-select: text;">Anda dapat memilih saya</div>
<div>pemilihan teks dinonaktifkan</div>
</div>

user-select all

Saat kami memberikan property user-select : all. Teks di dalam elemen dipilih secara otomatis pada klik konteks.

html```

Pada klik ini dapat memilih teks

user-select auto

perilaku user-select auto tergantung pada nilai yang dihitung dari elemen induknya dari user-select.

1. Jika nilai yang dihitung dari elemen induk tidak ada maka nilainya none. atau jika nilai yang dihitung adalah semua maka nilainya adalah all. atau jika nilainya adalah teks, nilainya adalah text
2. Jika tidak, perilaku default adalah text. yaitu pengguna dapat memilih text.
3. Pada pseudo elements ::before dan ::after perilaku none
4. Dan jika elemen adalah elemen yang dapat diedit yaitu, text atau textarea, nilai yang dihitung berisi atau elemen (Dalam IE)

user-select contain

user-select contain tidak didukung di browser lain kecuali internet explorer. Di IE kita harus memberikan opsi user-select : contain.

Jadi apa sebenarnya yang akan dilakukan oleh user-select : contain ini?

Ketika Anda memberikan user-select sebagai contain atau pemilihan elemen akan terikat ke elemen itu dan tidak dapat diperpanjang.

Lihat melalui demo di bawah ini untuk memahaminya lebih lanjut.

contoh CSS user-select

Kita akan melihat semua opsi user-select di satu tempat.

<h3>user-select:none</h3>
<div class="text-selection-none">
pemilihan teks dinonaktifkan
<div>Pemilihan teks dinonaktifkan di elemen anak-anak juga</div>
</div>

<h3>user-select:text</h3>
<div class="text-selection-none">
pemilihan teks dinonaktifkan
<div class="text-selection-text">Anda dapat memilih saya</div>
<div>pemilihan teks dinonaktifkan</div>
</div>

<h3>user-select:all</h3>
<div class="text-selection-all">
  Pada klik ini dapat memilih teks
</div>

<h3>user-select:auto</h3>
<div class="text-selection-none">
pemilihan teks dinonaktifkan
<div class="text-selection-auto">sebagai elemen induk tidak ada yang tidak dapat memilih teks</div>
<div>pemilihan teks dinonaktifkan</div>
<br/>

<div class="text-selection-text">
pemilihan teks diaktifkan
<div class="text-selection-auto">sebagai elemen induk adalah teks, dapat memilih teks</div>
<div> pemilihan teks diaktifkan</div>

<br/>

<div class="before text-selection-auto">sebagai elemen induk adalah teks, dapat memilih teks<br/></div>

<h3>
user-select:contain
</h3>

<div class="text-selection-contain">pemilihan teks mengandung<br/></div>
<div>Ini tidak dipilih</div>

Dan nilai CSS yang sesuai adalah

.disable-select {
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}

Seperti dijelaskan di atas user-select : contain hanya didukung di IE, jika Anda membuka di IE, Anda dapat mengamati perilaku pemilihan elemen tidak dapat diperpanjang di luar elemen dengan class .text-selection-contain.