HTML tabindex özelliği nedir?

tabindexHTML'de kullanılan özellik nedir ?

tabindexBir olan küresel nitelik iki şey sorumlu:

1. "odaklanabilir" öğelerin sırasını belirler ve
2. o unsurları "odaklanabilir" yapar .

Aklımda ikinci şey birincisinden daha önemli. Varsayılan olarak odaklanabilen çok az öğe vardır (örneğin, <a> ve form denetimleri). Geliştiriciler genellikle odaklanamayan öğelere (<div>, <span> vb.) Bazı JavaScript olay işleyicileri ('onclick' gibi) ekler ve arayüzünüzü yalnızca fare olaylarına değil klavye olaylarına da duyarlı hale getirme yolu (örneğin 'onkeypress') bu tür öğeleri odaklanabilir kılmak içindir. Son olarak, siparişi ayarlamak istemiyorsanız, ancak öğenizi tabindex="0"bu tür tüm öğelere odaklanabilir şekilde kullanmak istiyorsanız :

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

Ayrıca, sekme tuşu ile odaklanabilir olmasını istemiyorsanız kullanın tabindex="-1". Örneğin, geçiş yapmak için sekme tuşları kullanılırken aşağıdaki bağlantıya odaklanılmaz.

<a href="#" tabindex="-1">Tab key cannot reach here!</a>

Kullanıcı sekme düğmesine bastığında, kullanıcı aşağıdaki örnekte gösterildiği gibi 1, 2 ve 3. sırada yer alır.

Örneğin:

Name: <input name="name" tabindex="1"  />
Age: <input name="age" tabindex="3"  />
Email: <input name="email" tabindex="2"  />

tabindex, kullanıcıların bir sayfada gezinmek için Sekme tuşunu kullandıklarında izledikleri sıralamayı tanımlamak için kullanılır. Varsayılan olarak, doğal sekme sırası işaretlemedeki kaynak siparişle eşleşir.

Tabindex content niteliği, yazarların bir öğenin odaklanabilir olması gerekip gerekmediğini, sıralı odak gezinme kullanarak erişilebilir olup olmayacağını ve sıralı odak gezinme amacıyla öğenin göreli sırasının ne olacağını denetlemelerine olanak tanır. "Sekme dizini" adı, odaklanabilir öğeler arasında gezinmek için "sekme" tuşunun ortak kullanımından gelir. "Sekme" terimi, sıralı odak navigasyonu kullanılarak ulaşılabilen odaklanabilir öğeler arasında ilerlemeyi ifade eder.
W3C Öneri: HTML5
Bölüm 7.4.1 Sıralı odakta gezinme ve tabindex özelliği

tabindex0 ° C'de başlar veya pozitif bir tam sayı ve artışlarla yukarı doğru çevirin. Bu, Mozilla ve IE eski sürümlerinde, tabindex 1 başlayacak çünkü değeri 0 kaçınılması 2'ye konusu adımı görmek yaygındır ve sonra 2 0'a gidip daha sonra 3. maksimum tamsayı değeri olur tabindexise 32767. Öğeler aynı tabindexise, tabindex biçimlendirmedeki kaynak düzeniyle eşleşir. Negatif bir değer, öğeyi sekme dizininden kaldırır, böylece asla odaklanmaz.

Bir öğe atanmışsa bir tabindexbir -1ona elemanını kaldıracak ve odaklanabilir asla ama odak programlı kullanarak elemana verilebilir element.focus().

tabindexÖzniteliği hiçbir değer veya boş bir değer olmadan belirtirseniz, yoksayılır.

Eğer disablednitelik bir olan bir eleman üzerinde ayarlanır tabindex, eleman yok sayılacaktır.

A tabindex, kodun geri kalanıyla ilgili nerede olursa olsun sayfanın herhangi bir yerinde ayarlanırsa (altbilgi, içerik alanında, her yerde olabilir), tanımlanmışsa tabindexsekme sırası öğede başlar hangi açıkça düşük atanır tabindexdaha sonra elemanlar aracılığıyla döngüsü tanımlanmış ve açık sonra 0 üzerine değer tabindexo belgenin başına dönmek ve doğal sekme sırasını takip edecek, elemanlar aracılığıyla sekmeli edilmiştir.

HTML4 spesifikasyonunda yalnızca aşağıdaki öğeler tabindex niteliğini destekler: Çapa, alan, buton, giriş, nesne, seçmek, ve textarea. Ancak erişilebilirlik göz önünde bulundurularak HTML5 spesifikasyonu tüm öğelerin atanmasına izin verir tabindex.

-

Örneğin

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

aynıdır

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

çünkü hepsinin atandığı gerçeğine bakılmaksızın tabindex="1", aynı sırayı takip edecekler, ilki ilk ve sonuncusu son. Bu da aynı ..

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

çünkü varsayılan davranış ise tabIndex öğesini açıkça tanımlamanız gerekmez. A divvarsayılan olarak odaklanamaz, anchoretiketler.

tabSayfadaki sekme sırasını kontrol etme ( odağı taşımak için tuşuna basın).

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

ayarladığınız değerler, klavye odağınızın web sitesindeki öğeler arasında hareket edeceği sırayı belirler.

Aşağıdaki örnekte, sekmeye ilk bastığınızda imleciniz #foo, sonra #awesome, sonra #bar

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

Hiçbir yerde sekme dizini tanımlamadıysanız, klavye odağı sayfanızın HTML etiketlerini HTML belgesinde tanımlandıkları sırayla izler.

İçin sekme dizini belirttiğinizden daha fazla sekme yaparsanız, odak herhangi bir sekme dizini yokmuş gibi, yani HTML etiketlerinin görünme sırasına göre hareket eder

Varsayılan form öğesi odak gezinme sırasını değiştirmek için kullanılabilir.

Eğer varsa:

text input A

text input B

submit button C

sekme tuşunu kullanarak A-> B-> C arasında gezinebilirsiniz. Tabindex bu akışı değiştirmenize izin verir.

Normalde, kullanıcı bir formdaki alandan alana sekmeler yaptığında (sekmeye izin veren bir tarayıcıda, tüm tarayıcılar değil) sıra, alanların HTML kodunda görünme sırasıdır.

Ancak, bazen sekme sırasının biraz farklı akmasını istersiniz. Bu durumda, alanları TABINDEX kullanarak numaralandırabilirsiniz. Sekmeler daha sonra en düşük TABINDEX'ten en yükseğe doğru sıralanır.

Bu konuda daha fazla bilgi burada bulunabilir w3

başka bir iyi örnek burada bulunabilir

Basit bir deyişle, tabindexöğelere odaklanmak için kullanılır. Sözdizimi: tabindex="numeric_value" Bu numeric_value, öğenin ağırlığıdır. Önce daha düşük bir değere erişilir.

HTML tabindex özniteliği, bir öğenin klavyeyle gezinme yoluyla erişilip erişilemeyeceğini belirtmekten sorumludur . Kullanıcı Sekme tuşuna bastığında , odak bir öğeden diğerine geçer. Tabindex özniteliği kullanılarak, sekme sırası akışı kaydırılır.

Denetimler arasında sekmeler genellikle HTML kodunda göründükleri gibi sıralı olarak gerçekleşir.

Tabindex kullanıldığında sekme, en düşük tabindex içeren kontrolden tabindex sıralı olarak en yüksek tabindex'e sahip kontrole akacaktır