Untuk apa tabindex
atribut yang digunakan dalam HTML?
tabindex
adalah atribut global yang bertanggung jawab untuk dua hal:
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>
<div tabindex>
juga berhasil. Apakah ada alasan untuk tidak menggunakannya?-1
tidak sesuai ketika Anda "tidak ingin fokus", tetapi ketika Anda ingin mencegah fokus akibat navigasi keyboard. Elemen masih bisa fokus, hanya saja tidak dengan keyboard.-1
akhir dari penelitian saya untuk solusi untuk barang-barang yang memiliki posisi absolut dan berperilaku lucu ketika difokuskan oleh tab! HOorraaayyyyy.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:
sumber
Itu tabindexdigunakan 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.
The
tabindex
dimulai 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 maksimumtabindex
adalah32767
. Jika elemen memiliki hal yang samatabindex
maka tabindex akan cocok dengan urutan sumber di markup. Nilai negatif akan menghapus elemen dari indeks tab sehingga tidak akan pernah fokus.Jika elemen diberi
tabindex
dari-1
itu akan menghapus elemen dan itu tidak akan pernah focusable tetapi fokus dapat diberikan ke elemen pemrograman menggunakanelement.focus()
.Jika Anda menentukan
tabindex
atribut tanpa nilai atau nilai kosong itu akan diabaikan.Jika
disabled
atribut diatur pada elemen yang memilikitabindex
, elemen tersebut akan diabaikan.Jika a
tabindex
diatur 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 ditentukantabindex
maka urutan tab akan mulai pada elemen yang secara eksplisit diberi nilai terendah ditabindex
atas 0. Kemudian akan melalui elemen-elemen yang didefinisikan dan hanya setelahtabindex
elemen-elemen eksplisit telah ditabrak, akan kembali ke awal dokumen dan mengikuti urutan tab alami.Dalam spesifikasi HTML4 hanya elemen berikut yang mendukung atribut tabindex: jangkar, daerah, tombol, memasukkan, obyek, Pilih, dan textarea. Tetapi spesifikasi HTML5, dengan mempertimbangkan aksesibilitas, memungkinkan semua elemen ditugaskan
tabindex
.-
Sebagai contoh
sama dengan
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 ..karena Anda tidak perlu mendefinisikan tabIndex secara eksplisit jika itu adalah perilaku default. A
div
secara default tidak akan fokus,anchor
tag akan.sumber
tabindex
pada 1 bukannya 0 ?tabindex
mulai pada 0" tetapi kemudian kemudian mengatakan "urutan tab akan dimulai pada elemen yang secara eksplisit menetapkan nilai terendah ditabindex
atas 0" .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
sumber
:focus
)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
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
sumber
Ini dapat digunakan untuk mengubah urutan navigasi fokus elemen form default.
Jadi, jika Anda punya:
dengan menggunakan tombol tab Anda menavigasi melalui A-> B-> C. Tabindex memungkinkan Anda untuk mengubah aliran itu.
sumber
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
sumber
Dengan kata sederhana,
tabindex
digunakan untuk fokus pada elemen. Sintaks:tabindex="numeric_value"
Ininumeric_value
adalah bobot elemen. Nilai yang lebih rendah akan diakses terlebih dahulu.sumber
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.
sumber
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
sumber