Apa atribut HTML tabindex?

229

Untuk apa tabindexatribut yang digunakan dalam HTML?

tidur
sumber

Jawaban:

301

tabindexadalah atribut global yang bertanggung jawab untuk dua hal:

  1. itu mengatur urutan elemen "fokus" dan
  2. itu membuat elemen "fokus" .

Dalam pikiran saya hal kedua bahkan lebih penting daripada yang pertama. Ada sangat sedikit elemen yang dapat difokus secara default (mis. <a> dan kontrol formulir). Pengembang sangat sering menambahkan beberapa penangan acara JavaScript (seperti 'klik') pada elemen yang tidak dapat fokus (<div>, <span>, dan sebagainya), dan cara membuat antarmuka Anda menjadi responsif tidak hanya untuk peristiwa mouse tetapi juga pada acara keyboard (misalnya 'onkeypress') adalah untuk membuat elemen-elemen seperti itu bisa fokus. Terakhir, jika Anda tidak ingin mengatur pesanan tetapi buat elemen Anda bisa fokus digunakan tabindex="0"pada semua elemen seperti itu:

<div tabindex="0"></div>

Juga, jika Anda tidak ingin fokus melalui tombol tab maka gunakan tabindex="-1". Misalnya, tautan di bawah ini tidak akan difokuskan saat menggunakan tombol tab untuk melintas.

<a href="#" tabindex="-1">Tab key cannot reach here!</a>
Konstantin Smolyanin
sumber
2
Saya menemukan bahwa itu <div tabindex>juga berhasil. Apakah ada alasan untuk tidak menggunakannya?
danijar
5
Menggunakan tabindex -1 nyaman untuk hal-hal seperti lewati tautan. Anda dapat membuat tautan item ke sesuatu yang tepat di atas konten yang Anda coba tautkan ke pengguna tanpa membuat tautan ke item itu sendiri dapat dijangkau.
Brett
4
Perlu dicatat - dan jawabannya mungkin harus diperbaiki - bahwa nilainya -1tidak sesuai ketika Anda "tidak ingin fokus", tetapi ketika Anda ingin mencegah fokus akibat navigasi keyboard. Elemen masih bisa fokus, hanya saja tidak dengan keyboard.
amn
2
@danijar ya: ini pelanggaran spesifikasi. Per html.spec.whatwg.org/multipage/… , "Atribut tabindex, jika ditentukan, harus memiliki nilai yang merupakan integer yang valid" .
Mark Amery
Itulah -1akhir dari penelitian saya untuk solusi untuk barang-barang yang memiliki posisi absolut dan berperilaku lucu ketika difokuskan oleh tab! HOorraaayyyyy.
John Mutuma
54

Ketika pengguna menekan tombol tab pengguna akan diambil melalui formulir dalam urutan 1, 2, dan 3 seperti ditunjukkan dalam contoh di bawah ini.

Sebagai contoh:

Name: <input name="name" tabindex="1"  />
Age: <input name="age" tabindex="3"  />
Email: <input name="email" tabindex="2"  />
Robert
sumber
-> Bagaimana jika tabindex -1? Apa artinya?
7
@AlyssaGono Anda tampaknya belum membaca jawabannya dengan 85 upvotes ... tabindex dari -1 berarti Anda tidak dapat mencapai elemen itu dengan menekan tombol tab
John Ruddell
24

Itu digunakan untuk menentukan urutan yang diikuti pengguna ketika mereka menggunakan tombol Tab untuk menavigasi halaman. Secara default, urutan tabbing alami akan cocok dengan urutan sumber di markup.

Atribut konten tabindex memungkinkan penulis untuk mengontrol apakah suatu elemen seharusnya menjadi fokus, apakah itu seharusnya dapat dijangkau menggunakan navigasi fokus sekuensial, dan apa yang menjadi urutan relatif elemen untuk tujuan navigasi fokus sekuensial. Nama "indeks tab" berasal dari penggunaan umum tombol "tab" untuk bernavigasi melalui elemen-elemen yang dapat difokuskan. Istilah "tabbing" mengacu pada bergerak maju melalui elemen-elemen fokus yang dapat dicapai menggunakan navigasi fokus berurutan.
Rekomendasi W3C: HTML5
Bagian 7.4.1 Navigasi fokus berurutan dan atribut tabindex

The tabindexdimulai pada 0 atau bilangan positif dan bertahap ke atas. Ini umum untuk melihat nilai 0 dihindari karena dalam versi Mozilla dan IE yang lebih lama, tabindex akan mulai dari 1, beralih ke 2, dan hanya setelah 2 akan menjadi 0 dan kemudian 3. Nilai integer maksimum tabindexadalah 32767. Jika elemen memiliki hal yang sama tabindexmaka tabindex akan cocok dengan urutan sumber di markup. Nilai negatif akan menghapus elemen dari indeks tab sehingga tidak akan pernah fokus.

Jika elemen diberi tabindexdari -1itu akan menghapus elemen dan itu tidak akan pernah focusable tetapi fokus dapat diberikan ke elemen pemrograman menggunakan element.focus().

Jika Anda menentukan tabindexatribut tanpa nilai atau nilai kosong itu akan diabaikan.

Jika disabledatribut diatur pada elemen yang memiliki tabindex, elemen tersebut akan diabaikan.


Jika a tabindexdiatur di mana saja di dalam halaman terlepas dari di mana itu terkait dengan sisa kode (bisa di footer, area konten, di mana pun) jika ada yang ditentukan tabindexmaka urutan tab akan mulai pada elemen yang secara eksplisit diberi nilai terendah di tabindexatas 0. Kemudian akan melalui elemen-elemen yang didefinisikan dan hanya setelah tabindexelemen-elemen eksplisit telah ditabrak, akan kembali ke awal dokumen dan mengikuti urutan tab alami.


Dalam spesifikasi HTML4 hanya elemen berikut yang mendukung atribut tabindex: , , , , , , dan . Tetapi spesifikasi HTML5, dengan mempertimbangkan aksesibilitas, memungkinkan semua elemen ditugaskan tabindex.

-

Sebagai contoh

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="2"></li>
  <li tabindex="3"></li>
</ul>

sama dengan

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="1"></li>
  <li tabindex="1"></li>
</ul>

karena terlepas dari kenyataan bahwa mereka semua ditugaskan tabindex="1", mereka masih akan mengikuti urutan yang sama, yang pertama adalah yang pertama, dan yang terakhir adalah yang terakhir. Ini juga sama ..

<div>
  <a></a>
  <a></a>
  <a></a>
</div>

karena Anda tidak perlu mendefinisikan tabIndex secara eksplisit jika itu adalah perilaku default. A divsecara default tidak akan fokus, anchortag akan.

davidcondrey
sumber
Versi IE dan Mozilla apa yang memulai tabindexpada 1 bukannya 0 ?
arminrosu
-1; jawaban ini agak bingung. Anda menyebutkan bahwa "versi lama" dari IE dan Firefox memiliki tabbing mulai dari tabindex 1 bukannya tabindex 0 ... tapi itulah yang dilakukan oleh semua browser, seperti yang dipersyaratkan oleh spesifikasi! Anda juga bertentangan dengan diri Anda sendiri, pertama mengatakan " tabindexmulai pada 0" tetapi kemudian kemudian mengatakan "urutan tab akan dimulai pada elemen yang secara eksplisit menetapkan nilai terendah di tabindexatas 0" .
Mark Amery
18

Mengontrol urutan tabing (menekan tabtombol untuk memindahkan fokus) di dalam halaman.

Referensi: http://www.w3.org/TR/html401/interact/forms.html#h-17.11.1

Tom
sumber
6
Juga, memiliki tabindex membuat elemen dapat dipilih dengan klik mouse. (Menambahkan garis putus-putus, dapat ditata menggunakan :focus)
user123444555621
@ Pumbaa80 Anda tetap dapat memilih elemen input apa pun dengan mengklik mouse, dan hal yang sama berlaku untuk menggunakan CSS ": fokus". Atribut tabindex adalah opsional.
Drew
6
Itu berlaku untuk elemen input saja. Komentar saya berlaku untuk semua jenis elemen. Lihat jsfiddle.net/XsYCj untuk contohnya.
user123444555621
8

nilai yang Anda tetapkan menentukan urutan fokus keyboard Anda yang akan bergerak di antara elemen-elemen di situs web.

Pada contoh berikut, pertama kali Anda menekan tab, kursor Anda akan pindah ke #foo, lalu #awesome, lalu #bar

<input id="foo" tabindex="1"  />
<input id="bar" tabindex="3"  />
<input id="awesome" tabindex="2"  />

Jika Anda belum menetapkan indeks tab di mana pun, fokus keyboard akan mengikuti tag HTML halaman Anda sesuai urutan yang didefinisikan dalam dokumen HTML.

Jika Anda tab lebih banyak daripada tabindex yang Anda tentukan, fokus akan bergerak seolah-olah tidak ada tabindex, yaitu dalam urutan penampilan dari tag HTML

Eldamir
sumber
3

Ini dapat digunakan untuk mengubah urutan navigasi fokus elemen form default.

Jadi, jika Anda punya:

text input A

text input B

submit button C

dengan menggunakan tombol tab Anda menavigasi melalui A-> B-> C. Tabindex memungkinkan Anda untuk mengubah aliran itu.

cherouvim
sumber
3

Biasanya, ketika pengguna tab dari bidang ke bidang dalam formulir (di browser yang memungkinkan tab, tidak semua browser lakukan) urutannya adalah urutan bidang yang muncul dalam kode HTML.

Namun, terkadang Anda ingin urutan tab mengalir sedikit berbeda. Dalam hal ini, Anda bisa memberi nomor pada bidang menggunakan TABINDEX. Tab kemudian mengalir secara berurutan dari TABINDEX terendah ke tertinggi.

Info lebih lanjut tentang ini dapat ditemukan di sini w3

ilustrasi lain yang baik dapat ditemukan di sini

Mulki
sumber
2

Dengan kata sederhana, tabindexdigunakan untuk fokus pada elemen. Sintaks: tabindex="numeric_value" Ini numeric_valueadalah bobot elemen. Nilai yang lebih rendah akan diakses terlebih dahulu.

Aman Dhanda
sumber
"Nilai yang lebih rendah akan diakses terlebih dahulu." - tidak sepenuhnya benar; Nilai 0 dan negatif memiliki arti khusus.
Mark Amery
1

Atribut tabindex HTML bertanggung jawab untuk menunjukkan apakah suatu elemen dapat dijangkau oleh navigasi keyboard . Saat pengguna menekan tombol Tab , fokus dialihkan dari satu elemen ke elemen lainnya. Dengan menggunakan atribut tabindex, aliran urutan tab digeser.

Nesha Zoric
sumber
0

Tab melalui kontrol biasanya terjadi secara berurutan seperti yang muncul pada kode HTML.

Menggunakan tabindex, tabbing akan mengalir dari kontrol dengan tabindex terendah ke kontrol dengan tabindex tertinggi dalam urutan sekuensial tabindex

Kamal
sumber