Bagaimana cara mengabaikan elemen HTML dari tabindex?

362

Apakah ada cara dalam HTML untuk memberi tahu browser agar tidak mengizinkan pengindeksan tab pada elemen tertentu?

Di halaman saya meskipun ada tontonan yang dirender dengan jQuery, ketika Anda menabrak itu, Anda mendapatkan banyak penekanan tab sebelum kontrol tab bergerak ke tautan yang terlihat berikutnya pada halaman karena semua hal yang ditabrak disembunyikan ke pengguna secara visual.

html tabindex Tom Gullen
sumber

Jawaban:

592

Anda bisa menggunakannya tabindex="-1".

Spesifikasi W3C HTML5 mendukung tabindexnilai negatif :

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

Perhatikan bahwa ini adalah fitur HTML5 dan mungkin tidak berfungsi dengan browser lama.
Agar memenuhi standar W3C HTML 4.01 (dari 1999) , tabindex harus positif.

Contoh penggunaan di bawah ini dalam HTML murni.

<input />
<input tabindex="-1" placeholder="NoTabIndex" />
<input />
Luaskan cuplikan

Martin Hennings
sumber
12
Tampaknya Google Chrome tidak mendukung -1, yang masuk akal karena secara teknis tabIndex hanya mendukung 0 -32767 sesuai tautanW3 . Jadi ketika saya melakukan ini; Saya menggunakan 500. Retas; tapi berhasil.
Flea
38
@Flea Pada versi 23, Google Chrome mendukung -1 pada tabindex. Tidak yakin sudah berapa lama hal itu terjadi, mungkin sebelum tanggal 23. Saya menguji "-1" di Chrome 23, Firefox 18, IE8, IE9, dan Opera 12.11 dan berhasil di seluruh papan.
jkupczak
5
Saya telah mengedit jawaban untuk menautkan ke spesifikasi HTML5 yang diperbarui. tabindexsekarang memungkinkan untuk memiliki nilai negatif.
James Donnelly
1
@ JamesDonnelly Terima kasih atas hasil edit Anda. Saya menambahkan kembali referensi ke spesifikasi W3C HTML4 untuk kompatibilitas browser.
Martin Hennings
2
Didukung sejak IE 5.01 msdn.microsoft.com/en-us/library/ie/ms534654(v=vs.85).aspx
Skurpi
121

Jangan lupa itu, meskipun tabindexsemuanya huruf kecil dalam spesifikasi dan dalam HTML, dalam Javascript / DOM yang disebut properti tabIndex.

Jangan lupa mencoba mencari tahu mengapa indeks panggilan yang diubah secara terprogram element.tabindex = -1tidak berfungsi. Gunakan element.tabIndex = -1.

Eric L.
sumber
34
Sepertinya ini seharusnya komentar, bukan jawaban.
DrCord
47
Eh, saya senang membacanya, dan saya mungkin akan melewatkannya jika dimakamkan sebagai komentar.
MalcolmOcean
10

Jika ini adalah elemen alami dalam urutan tab seperti tombol dan jangkar, menghapusnya dari urutan tab dengan tabindex = -1 adalah semacam bau aksesibilitas. Jika mereka menyediakan fungsi duplikat, menghapusnya dari urutan tab tidak masalah, dan pertimbangkan untuk menambahkan aria-hidden = true ke elemen-elemen ini sehingga teknologi bantuan akan mengabaikannya.

Mat
sumber
8

Jika Anda bekerja di peramban yang tidak mendukung tabindex="-1", Anda mungkin bisa lolos hanya dengan memberikan hal-hal yang perlu dilewati indeks tab yang sangat tinggi . Misalnya tabindex="500"pada dasarnya memindahkan urutan tab objek ke akhir halaman.

Saya melakukan ini untuk formulir entri data yang panjang dengan tombol dilemparkan di tengahnya. Ini bukan tombol yang sering diklik orang, jadi saya tidak ingin mereka secara tidak sengaja menabraknya dan tekan enter. disabledtidak akan bekerja karena itu adalah tombol.

Jemmeh
sumber
5

Retas seperti "tabIndex = -1" tidak berfungsi untuk saya dengan Chrome v53.

Ini yang berfungsi untuk chrome, dan sebagian besar browser:

function removeTabIndex(element) {
    element.removeAttribute('tabindex');
}
<input tabIndex="1" />
<input tabIndex="2" id="notabindex" />
<input tabIndex="3" />
<button tabIndex="4" onclick="removeTabIndex(document.getElementById('notabindex'))">Remove tabindex</button>
Luaskan cuplikan

Val
sumber
Tidakkah ini hanya menetapkan indeks tab default untuk elemen daripada menonaktifkan tab?
Lawyerson
@ Lawyerson tidak, itu benar-benar menonaktifkan tab seperti yang dijelaskan sendiri 'removeAttribute'. Sudahkah Anda mencobanya tetapi dengan hasil yang berbeda?
Val
2
Saya mencobanya tanpa efek. Browser secara default memungkinkan Anda untuk menabrak input dalam urutan yang muncul pada halaman bahkan jika tidak ada tabindex yang ditetapkan pada mereka, jadi hanya masuk akal bagi saya bahwa hanya menghapus atribut tidak benar-benar menonaktifkan sepenuhnya tabbing. Selanjutnya, input yang ingin saya gunakan yang ini tidak memiliki atribut "tabindex".
Lawyerson
Menjalankan potongan saya dapat tab ke notabindexkotak seolah-olah tabIndex=5setelah menekan tombol. Bukan masalah walikota tetapi masih belum membuatnya sepenuhnya "tidak dapat ditabuh".
Mikael Dúi Bolinder
Mungkin tidak berfungsi karena Anda menggunakan kasing unta. Semua huruf keciltabindex
dman
3

Cara untuk melakukan ini adalah dengan menambahkan tabindex="-1". Dengan menambahkan ini ke elemen tertentu, itu menjadi tidak terjangkau oleh navigasi keyboard. Ada artikel bagus di sini yang akan membantu Anda lebih memahami tabindex .

Nesha Zoric
sumber
2

Cukup tambahkan atribut disabledke elemen (atau gunakan jQuery untuk melakukannya untuk Anda). Dinonaktifkan mencegah input dari fokus atau dipilih sama sekali.

Yaakov Ainspan
sumber
Versi Chrome yang mana?
Yaakov Ainspan
Chrome 49.0.2623.75 (64 bit).
Felix Eve
Versi saya adalah 51.0.2704.103. Lihat biola ini . Anda mungkin memiliki kode yang salah, Anda tidak pernah tahu.
Yaakov Ainspan
@AtulChaudhary, bagaimana cara kerjanya? Anda masih bisa fokus?
Yaakov Ainspan
begitu bidang dinonaktifkan, bidang tersebut tetap dinonaktifkan dan ini merupakan masalah di iOS9 tetapi tampaknya berfungsi di iOS10
Atul Chaudhary