Cara menonaktifkan tag di html

Question

Dalam contoh ini, saya akan mempelajari cara menonaktifkan tag jangkar di html. Anda dapat dengan mudah dan cukup menonaktifkan tag jangkar di html

Table of Contents Show

Jangan lakukan itu
Cara jitu. hapus href
Itu tidak cukup, saya ingin sesuatu yang lebih kompleks sehingga saya bisa terlihat lebih pintar
Bawa JavaScript
Bagaimana cara menonaktifkan tautan tag?
Bagaimana cara menonaktifkan elemen?
Bagaimana cara menonaktifkan tag di JavaScript?
Bagaimana cara menonaktifkan opsi pilih dalam HTML?

Kami sekarang telah melihat cara menonaktifkan elemen jangkar/tautan HTML (tag) menggunakan peristiwa penunjuk. tidak ada, yang dapat dilakukan tanpa menyentuh atribut href yang ada menggunakan gaya

Selanjutnya kita akan melihat cara menonaktifkan elemen jangkar/tautan HTML menggunakan JavaScript sebaris di dalam atribut href

Topik menonaktifkan tautan muncul di tempat kerja saya tempo hari. Entah bagaimana, gaya jangkar "dinonaktifkan" ditambahkan ke gaya tipografi kami tahun lalu saat saya tidak melihat. Namun ada masalah. tidak ada cara nyata untuk menonaktifkan tautan

a {
  /* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
  /* Enabled link styles */
}

_2 (dengan atribut

a {
  /* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
  /* Enabled link styles */
}

3 yang valid) di HTML. Belum lagi, mengapa Anda mau?

Pada titik tertentu, sepertinya rekan kerja saya tidak akan menerima kenyataan ini, jadi saya mulai memikirkan bagaimana hal ini dapat dicapai. Mengetahui bahwa itu akan memakan banyak waktu, saya ingin membuktikan bahwa itu tidak sepadan dengan usaha dan kode untuk mendukung interaksi yang tidak konvensional seperti itu, tetapi saya khawatir dengan menunjukkan hal itu dapat dilakukan, mereka akan mengabaikan semua peringatan saya dan hanya menggunakan contoh saya sebagai . Ini belum cukup mengguncang saya, tetapi saya pikir kita bisa melalui penelitian saya

Pertama, hal pertama

Jangan lakukan itu

Tautan yang dinonaktifkan bukanlah tautan, itu hanya teks. Anda perlu memikirkan kembali desain Anda jika perlu menonaktifkan tautan

Bootstrap memiliki contoh penerapan kelas

a {
  /* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
  /* Enabled link styles */
}

4 ke tag jangkar, dan saya benci mereka karena itu. Setidaknya mereka menyebutkan bahwa kelas tersebut hanya menyediakan gaya yang dinonaktifkan, tetapi ini menyesatkan. Anda perlu melakukan lebih dari sekadar membuat tautan tampak dinonaktifkan jika Anda benar-benar ingin menonaktifkannya

Cara jitu. hapus href

Jika Anda telah memutuskan bahwa Anda akan mengabaikan peringatan saya dan melanjutkan dengan menonaktifkan tautan, maka menghapus atribut

a {
  /* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
  /* Enabled link styles */
}

3 adalah cara terbaik yang saya tahu caranya

Langsung dari officialnya

Atribut

a {
  /* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
  /* Enabled link styles */
}

3 pada elemen

a {
  /* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
  /* Enabled link styles */
}

7 dan

a {
  /* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
  /* Enabled link styles */
}

8 tidak diperlukan;

Definisi yang lebih mudah dipahami dari MDN

Atribut ini dapat dihilangkan (mulai dari HTML5) untuk membuat tautan placeholder. Tautan placeholder menyerupai hyperlink tradisional, tetapi tidak mengarah ke mana pun

Berikut adalah kode JavaScript dasar untuk menyetel dan menghapus atribut

a {
  /* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
  /* Enabled link styles */
}

3

/* 
 * Use your preferred method of targeting a link
 *
 * document.getElementById('MyLink');
 * document.querySelector('.link-class');
 * document.querySelector('[href="https://unfetteredthoughts.net"]');
 */
// "Disable" link by removing the href property
link.href = '';
// Enable link by setting the href property
link.href = 'https://unfetteredthoughts.net';

_

Menata ini melalui CSS juga cukup mudah

a {
  /* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
  /* Enabled link styles */
}

Itu saja yang perlu Anda lakukan

Itu tidak cukup, saya ingin sesuatu yang lebih kompleks sehingga saya bisa terlihat lebih pintar

Jika Anda benar-benar harus merekayasa secara berlebihan beberapa solusi ekstrem, berikut adalah beberapa hal yang perlu dipertimbangkan. Mudah-mudahan, Anda akan memperhatikan dan menyadari bahwa apa yang akan saya tunjukkan kepada Anda tidak sebanding dengan usaha

Pertama, kita perlu mengatur gaya tautan kita agar terlihat tidak aktif

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

<a class="isDisabled" href="https://unfetteredthoughts.net">Disabled Link</a>

_

Pengaturan

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

1 ke

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

2 harus mengatur ulang warna font kembali ke warna teks non-tautan normal Anda. Saya juga menyetel kursor mouse ke

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

3 untuk menampilkan indikator yang bagus saat melayang bahwa tindakan normal tidak diperbolehkan. Kami telah meninggalkan pengguna non-mouse yang tidak dapat mengarahkan kursor, terutama layar sentuh dan keyboard, sehingga mereka tidak akan mendapatkan indikasi ini. Selanjutnya opacity dipotong menjadi setengah. Menurut , elemen yang dinonaktifkan tidak perlu memenuhi pedoman kontras warna. Saya pikir ini sangat berisiko karena pada dasarnya ini adalah teks biasa pada saat ini, dan menurunkan opacity menjadi setengahnya akan membuat sangat sulit untuk dibaca oleh pengguna dengan penglihatan rendah, alasan lain saya membenci ini. Terakhir, garis bawah dekorasi teks dihapus karena ini biasanya merupakan indikator terbaik bahwa ada tautan. Sekarang ini terlihat seperti tautan yang dinonaktifkan

Tapi itu tidak benar-benar dinonaktifkan. Pengguna masih dapat mengeklik/mengetuk tautan ini. Saya mendengar Anda berteriak tentang

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

4

.isDisabled {
  ...
  pointer-events: none;
}

Oke, kita sudah selesai. Tautan yang dinonaktifkan tercapai. Kecuali, itu hanya benar-benar dinonaktifkan untuk pengguna mouse yang mengklik dan menyentuh pengguna yang mengetuk. Bagaimana dengan browser yang tidak mendukung

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

4? . IE11 dan Edge sebenarnya tidak mendukung

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

4 kecuali

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

7 diatur ke

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

8 atau

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

9. Juga, pengaturan

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

_4 ke

<a class="isDisabled" href="https://unfetteredthoughts.net">Disabled Link</a>

1 menimpa kursor

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

3 kita yang bagus, jadi sekarang pengguna mouse tidak akan mendapatkan indikasi visual tambahan bahwa tautan dinonaktifkan. Ini sudah mulai berantakan. Sekarang kita harus mengubah markup dan CSS kita…

.isDisabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.isDisabled > a {
  color: currentColor;
  display: inline-block;  /* For IE11/ MS Edge bug */
  pointer-events: none;
  text-decoration: none;
}

<span class="isDisabled"><a href="https://unfetteredthoughts.net">Disabled Link</a></span>

Membungkus tautan dalam

<a class="isDisabled" href="https://unfetteredthoughts.net">Disabled Link</a>

3

<a class="isDisabled" href="https://unfetteredthoughts.net">Disabled Link</a>

4

<a class="isDisabled" href="https://unfetteredthoughts.net">Disabled Link</a>

5 dan menambahkan kelas

<a class="isDisabled" href="https://unfetteredthoughts.net">Disabled Link</a>

6 memberi kita setengah dari gaya visual yang dinonaktifkan. Efek samping yang bagus di sini adalah bahwa kelas yang dinonaktifkan sekarang bersifat umum dan dapat digunakan pada elemen lain, seperti tombol dan elemen formulir. Tag jangkar yang sebenarnya sekarang memiliki

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

_4 dan

<a class="isDisabled" href="https://unfetteredthoughts.net">Disabled Link</a>

8 diatur ke

<a class="isDisabled" href="https://unfetteredthoughts.net">Disabled Link</a>

1

Bagaimana dengan pengguna keyboard? .

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

_4 hanya untuk penunjuk, tidak ada acara keyboard. Kami juga perlu mencegah aktivasi untuk browser lama yang tidak mendukung

.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

4. Sekarang kita harus memperkenalkan beberapa JavaScript

Bawa JavaScript

// After using preferred method to target link
link.addEventListener('click', function (event) {
  if (this.parentElement.classList.contains('isDisabled')) {
    event.preventDefault();
  }
});

Sekarang tautan kami terlihat dinonaktifkan dan tidak merespons aktivasi melalui klik, ketuk, dan tombol

.isDisabled {
  ...
  pointer-events: none;
}

0. Tapi kita masih belum selesai. Pengguna pembaca layar tidak dapat mengetahui bahwa tautan ini dinonaktifkan. Kami perlu menggambarkan tautan ini sebagai dinonaktifkan. Atribut

.isDisabled {
  ...
  pointer-events: none;
}

_4 tidak valid pada tautan, tetapi kita dapat menggunakan

.isDisabled {
  ...
  pointer-events: none;
}

5

<span class="isDisabled"><a href="https://unfetteredthoughts.net" aria-disabled="true">Disabled Link</a></span>

Sekarang saya akan menggunakan kesempatan ini untuk mendesain tautan berdasarkan atribut

.isDisabled {
  ...
  pointer-events: none;
}

6. Saya suka menggunakan atribut ARIA sebagai pengait untuk CSS karena memiliki elemen dengan gaya yang tidak tepat merupakan indikator bahwa aksesibilitas penting tidak ada

.isDisabled {
  cursor: not-allowed;
  opacity: 0.5;
}
a[aria-disabled="true"] {
  color: currentColor;
  display: inline-block;  /* For IE11/ MS Edge bug */
  pointer-events: none;
  text-decoration: none;
}

Sekarang tautan kami terlihat dinonaktifkan, bertindak dinonaktifkan, dan digambarkan sebagai dinonaktifkan

Sayangnya, meskipun tautan digambarkan sebagai dinonaktifkan, beberapa pembaca layar (JAWS) masih akan mengumumkannya sebagai dapat diklik. Itu dilakukan untuk elemen apa pun yang memiliki pendengar klik. Ini karena kecenderungan pengembang untuk menjadikan elemen non-interaktif seperti

.isDisabled {
  ...
  pointer-events: none;
}

7 dan

<a class="isDisabled" href="https://unfetteredthoughts.net">Disabled Link</a>

4 sebagai elemen pseudo-interaktif dengan pendengar yang sederhana. Tidak ada yang bisa kita lakukan tentang itu di sini. Semua yang telah kami lakukan untuk menghilangkan indikasi bahwa ini adalah tautan digagalkan oleh teknologi bantuan yang kami coba tipu, ironisnya karena kami telah mencoba mengelabui sebelumnya

Tetapi bagaimana jika kita memindahkan pendengar ke tubuh?

a {
  /* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
  /* Enabled link styles */
}

0

Sudahkah kita selesai? . Pada titik tertentu kita perlu mengaktifkan tautan ini sehingga kita perlu menambahkan kode tambahan yang akan mengaktifkan status/perilaku ini

a {
  /* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
  /* Enabled link styles */
}

_1

Itu dia. Kami sekarang memiliki tautan nonaktif yang dinonaktifkan secara visual, fungsional, dan semantik untuk semua pengguna. Hanya butuh 10 baris CSS, 15 baris JavaScript (termasuk 1 pendengar di badan), dan 2 elemen HTML

Bagaimana cara menonaktifkan tautan tag?

Nonaktifkan tautan # . hapus atribut href sehingga tidak dapat lagi menerima fokus . tambahkan role="link" agar selalu dianggap sebagai tautan oleh pembaca layar. tambahkan atribut aria-disabled="true" sehingga diindikasikan sebagai dinonaktifkan.

Bagaimana cara menonaktifkan elemen?

Sebuah elemen dapat dinonaktifkan di HTML dengan menyetel properti penonaktifan ke true dan mengaktifkannya kembali dengan menyetel dinonaktifkan=false. Dengan menggunakan jQuery, Anda dapat mengambil elemen yang ingin Anda aktifkan atau nonaktifkan dan ubah properti ini dengan menggunakan fungsi prop() atau attr(), bergantung pada versi jQuery yang Anda gunakan.

Bagaimana cara menonaktifkan tag di JavaScript?

Menggunakan Javascript .

Menonaktifkan dokumen tombol html. getElementById("Tombol"). dinonaktifkan = benar;

Mengaktifkan dokumen tombol html. getElementById("Tombol"). dinonaktifkan = salah;

Demo Disini

Bagaimana cara menonaktifkan opsi pilih dalam HTML?

Anda dapat menggunakan properti pilihan pengguna untuk menonaktifkan pemilihan teks dari suatu elemen . Di browser web, jika Anda mengklik dua kali pada beberapa teks, itu akan dipilih/disorot. Properti ini dapat digunakan untuk mencegah hal ini.

kode html