tabindex Özelliği

tabindex özelliği, öğeler arasında Tab tuşu ile gezinirken odak alma sırasını belirler.

Bu tuşa basarak sayfadaki bazı öğeleri sırayla etkinleştirebilirsiniz (bağlantılar ve form öğeleri). Etkin öğeler giriş odağını alacaktır.

input ve textarea tipi giriş alanları için odak, alanda imlecin yanıp sönmesi ve içine metin girilebilmesi anlamına gelir, bağlantılar ve diğer öğeler için bu, bir şekilde vurgulanma (altını çizme, kesikli bir sınırla çevreleme vb., tarayıcıya bağlıdır) olarak ifade edilir.

Odak alındığı anda öğe sayfada görünür değilse (kaydırma nedeniyle), sayfa bu öğeye doğru kaydırılacaktır.

Öğelere tabindex özelliği atanmamışsa veya 0 değerine sahipse, Tab tuşu ile üzerlerinden geçiş, HTML kodundaki öğelerin sırasına göre gerçekleşir.

Sayfada tabindex atanmış öğeler varsa, önce bu öğeler arasında, tabindex özelliğinin daha küçük değerlerinden (en küçüğü bir olabilir) başlayarak ve özelliğin değerlerinin artış sırasına göre geçiş yapılacak, bu tür öğeler bittiğinde ise tabindex atanmamış veya 0 değerine sahip öğeler arasında geçiş devam edecektir.

Özelliğin değeri 1'den sonsuza kadar tam sayılardır. Bazı numaralar atlanmışsa - sorun olmaz (örneğin, 2 numarası yoksa, önce odak tabindex değeri 1 olan öğeye, ardından tabindex değeri 3 olan öğeye gidecektir).

Sayfada Tab tuşuna basıldığı anda odakta bir öğe varsa (odak sadece Tab ile değil, fareyle öğeye tıklanarak veya autofocus özelliği ile de alınmış olabilir), bir sonraki Tab tuşuna basıldığında, odakta olan öğeden sonra gelen sıradaki öğe odağı alacaktır (örneğin, şu anda odak tabindex değeri 3 olan öğedeyse, bir sonraki odağı tabindex değeri 4 olan öğe alacaktır).

Bir giriş alanına disabled özelliği atanmışsa, bu alana tabindex özelliği atanmış olsa bile Tab tuşu ile yapılan geçişlerde dikkate alınmayacaktır.

tabindex özelliği şu etiketlere uygulanır: a, input, textarea, button, select, area.

Örnek

Hadi input'lara tabindex özelliği atayalım. Tab tuşuna sırayla basın ve giriş odağının ilk input'tan dördüncüye nasıl geçtiğini göreceksiniz, ardından sayfanın başındaki bağlantılar arasında devam edecektir (çünkü tabindex özelliği atanmış başka öğe kalmamıştır):

<input type="text" tabindex="3" placeholder="numara: 3">
<input type="text" tabindex="1" placeholder="numara: 1">
<input type="text" tabindex="2" placeholder="numara: 2">
<input type="text" tabindex="4" placeholder="numara: 4">

Ayrıca Bakınız

odaktaki bir öğenin stillerini değiştirmenize izin veren focus sözde sınıfı