Atribut tabindex

Atribut tabindex menetapkan urutan pemerolehan fokus saat berpindah antar elemen menggunakan tombol Tab.

Dengan menekan tombol ini, Anda dapat mengaktifkan secara berurutan beberapa elemen halaman (tautan dan elemen formulir). Elemen aktif akan mendapatkan fokus input.

Untuk bidang input bertipe input dan textarea fokus akan diungkapkan dengan kursor yang berkedip di dalam bidang dan teks dapat dimasukkan ke dalamnya, untuk tautan dan elemen lainnya, ini akan menjadi penyorotan dengan cara tertentu (garis bawah, garis tepi putus-putus, dll., tergantung pada browser).

Jika pada saat pemerolehan fokus elemen tidak terlihat di halaman (karena pengguliran), maka halaman akan menggulir ke elemen tersebut.

Jika elemen tidak diberi atribut tabindex atau nilainya 0, maka perpindahan melalui mereka dengan tombol Tab akan mengikuti urutan elemen dalam kode HTML.

Jika di halaman terdapat elemen yang diberi tabindex, maka awalnya perpindahan akan berlangsung melalui mereka, mulai dari nilai atribut tabindex yang lebih kecil (yang terkecil bisa jadi satu) dan seterusnya sesuai kenaikan nilai atribut, dan ketika elemen seperti itu habis - perpindahan akan berlanjut ke elemen-elemen yang tidak diberi tabindex atau yang memiliki nilai 0.

Nilai atribut adalah bilangan bulat dari 1 hingga tak terhingga. Jika beberapa nomor dilewati - tidak ada hal buruk yang akan terjadi (misalnya, jika tidak ada nomor 2, maka pertama fokus akan jatuh pada elemen dengan tabindex, sama dengan 1, lalu pada elemen dengan tabindex, sama dengan 3).

Jika di halaman pada saat tombol ditekan Tab ada elemen yang difokus (fokus bisa didapatkan tidak hanya dengan menekan Tab, tapi juga dengan mengklik elemen dengan mouse atau dengan atribut autofocus), maka penekanan tombol Tab berikutnya akan mengakibatkan fokus diperoleh oleh elemen berikutnya dalam urutan setelah elemen yang sedang difokus (misalnya, jika saat ini yang difokus adalah elemen dengan tabindex 3, maka berikutnya yang akan mendapat fokus adalah elemen dengan tabindex 4).

Jika bidang input diberi atribut disabled, maka bidang tersebut akan diabaikan oleh perpindahan melalui tombol Tab, bahkan jika bidang tersebut diberi atribut tabindex.

Atribut tabindex diterapkan pada tag a, input, textarea, button, select, area.

Contoh

Mari kita berikan atribut tabindex pada input. Tekan tombol Tab secara berurutan dan Anda akan melihat, bagaimana fokus input akan berpindah dari input pertama ke keempat, lalu akan berlanjut melalui tautan dari awal halaman (karena tidak ada lagi elemen dengan atribut tabindex yang ditetapkan):

:

Lihat juga