Cegah tabstop pada elemen A (tautan jangkar) dalam HTML

152

Apakah mungkin untuk membatalkan <a href="...">dari yang tabstopped di browser apa pun? Saya ingin melakukan ini tanpa Javascript.

html anchor tabstop Robert Koritnik
sumber

Jawaban:

265

Beberapa browser mendukung tabindex="-1"atribut, tetapi tidak semuanya, karena ini bukan perilaku standar.

Roberto Aloi
sumber
22
Oh bagus! Terima kasih! Saya sudah memeriksa dengan FF3.5, IE8 dan CH3 dan bekerja di ketiganya. Terima kasih banyak!
Robert Koritnik
1
Jangan khawatir tentang ini: seperti yang dinyatakan zzzzBov di sini , HTML5 datang untuk menyelamatkan dan menstandarisasi fungsi ini. Jadi sekarang browser yang bersalah adalah mereka yang melewatkan ini.
TechNyquist
1
Ingatlah bahwa menonaktifkan tabstop pada hyperlink bertentangan dengan aturan aksesibilitas (mis. Orang yang menggunakan pembaca layar, dll). Jika Anda tahu bahwa ini bukan masalah bagi basis pengguna Anda, maka itu akan baik-baik saja.
Ricardo Sanchez
73

Modern, HTML5 compliant, browser mendukung [tabindex]atribut , di mana nilai -1akan mencegah elemen dari tab.

Jika nilainya bilangan bulat negatif,
agen pengguna harus mengizinkan elemen difokuskan, tetapi tidak boleh membiarkan elemen tersebut dicapai menggunakan navigasi fokus berurutan.

zzzzBov
sumber
1
Kutipan dokumentasi selalu membantu. ;-) Ini memberitahu kita bahwa mereka yang tidak mendukung ini adalah di antara sedikit dan mereka kemungkinan akan mendukungnya cepat atau lambat.
Robert Koritnik
15

Anda bisa menerapkan penangan JQuery ke elemen yang ingin Anda targetkan beberapa elemen tanpa berhenti tab.

$(document).ready(function () {
    $('.class').attr('tabindex', '-1');
});

Akan menjadi salah satu cara untuk melakukannya ....

dtharpe
sumber
6

Saya pikir Anda bisa melakukan ini dengan javascript, Anda menimpa window.onkeypressatau onkeydown, menjebak tombol tab, dan mengatur fokus pada urutan yang diinginkan.

Ammosi
sumber
2
Saya tidak tahu apakah Anda sudah memeriksa jawaban lain yang diterima secara khusus yang dijawab sekitar setahun yang lalu dan menyelesaikan masalah ini tanpa menggunakan Javascript.
Robert Koritnik
2
Saya menghargai solusi alternatif bahkan jika itu tidak mengatasi OP serta jawaban yang diterima. Tidak perlu meremehkan.
Anthony DiSanti
@Anthony DiSanti: Itu benar, tetapi dalam kasus khusus ini saya masih tidak melihat mengapa orang memilih javascript jika sesuatu yang lain berfungsi lebih baik? Jadi jika itu bukan jawaban untuk pertanyaan ini, mengapa ada di sini? Lupakan. Javascript biasanya merupakan langkah terakhir yang akan diambil jika hal-hal tertentu tidak dapat dilakukan sebaliknya. Dan aku minta maaf @Ammosi jika aku menghinamu. Saya tidak bermaksud kasar. Terima kasih atas jawabannya.
Robert Koritnik
7
Saya setuju untuk menghindari javascript jika ada solusi HTML atau CSS berbasis standar. Namun, dalam hal ini tidak ada. Poster asli tidak perlu mendukung browser sebelum IE8 dan FF3.5, tetapi untuk pekerjaan saya, saya perlu mendukung kembali ke IE6. Solusi tabindex karenanya tidak berlaku. Memberikan satu-satunya solusi yang berfungsi di browser dengan pangsa pasar terbesar tidak boleh berkecil hati.
Anthony DiSanti
4

Hapus hrefatribut dari tag anchor Anda

CodeDreamer68
sumber
bagaimana jika saya tidak bisa?
Hakan Fıstık
Jika mau menggunakan javascript meskipun ada pertanyaan untuk menghindari solusi semacam itu, untuk menghapus atribut href, gunakan dokumen jquery yang dimuat dengan sesuatu seperti$('[href="whatever-the-url-is"]').removeAttr('href');
Jonas Lundman
6
LOL menghapus href
quemeful