Soru HTML tabindex özniteliği nedir?


Nedir tabindex HTML'de kullanılan özellik


212
2017-11-06 07:09


Menşei




Cevaplar:


tabindex bir küresel özellik iki şeyden sorumlu:

  1. "Odaklanabilir" elemanların sırasını ayarlar ve
  2. o öğeleri "odaklanabilir" yapar.

Aklımda ikinci şey, daha sonra ilk olandan daha önemlidir. Varsayılan olarak odaklanabilen çok az öğe vardır (ör. <a> ve form kontrolleri). Geliştiriciler, genellikle odaklanamayan öğelerde (<div>, <span> vb.) Bazı JavaScript olay işleyicileri ('onclick' gibi) eklerler. Arayüzünüzü yalnızca fare olaylarına değil, klavye olaylarına (örneğin, 'onkeypress') de duyarlı hale getirmenin yolu bu tür öğeleri odaklanabilir hale getirmektir. Ve son durumda, siparişi ayarlamak istemezseniz ancak sadece öğenizi odaklanabilir hale getirin tabindex="0" tüm bu unsurlarda:

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

Ayrıca, sekme tuşunu kullanarak odaklanabilir olmasını istemiyorsanız, tabindex="-1". Örneğin, geçiş yapmak için sekme tuşlarını kullanırken aşağıdaki bağlantı odaklanmayacaktır.

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

284
2017-09-25 09:01



Bunu öğrendim <div tabindex> ayrıca çalışır. Bunu kullanmamanın bir nedeni var mı? - danijar
-1 sekmelix'in kullanılması, atlama linkleri gibi şeyler için uygundur. Bir öğenin bağlantısını, öğeye bağlı olmaksızın kullanıcıyı bağlamaya çalıştığınız içeriğin hemen üstündeki bir öğeye bağlayabilirsiniz. - Brett
Dikkat çekici - ve cevap muhtemelen düzeltilmelidir - bu değer -1 "Odaklanmak istemediğinizde" uygun değildir, aksine klavye gezinme sonucu odağı önlemek istediğinizde uygun değildir. Öğe hala klavye ile değil, odaklanabilir. - amn
@danijar evet: bu bir spec ihlali. Başına html.spec.whatwg.org/multipage/..., "Belirtildiyse tabindex özniteliğinin geçerli bir tamsayı olan bir değere sahip olması gerekir". - Mark Amery


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

Örneğin:

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

55
2017-11-06 08:37



-> Eğer tabindex -1 ise? Bu ne demek?
@AlyssaGono cevabını 85 adet upvotes ile okumamış görünüyorsunuz ... -1 tabindex sekmesi düğmesine basarak bu öğeye ulaşamayacağınız anlamına gelir. - John Ruddell


 Kullanıcıların bir sayfada gezinmek için Tab tuşunu kullandıklarında takip ettikleri bir sırayı tanımlamak için kullanılır. Varsayılan olarak, doğal sekme sırası, biçimlendirmedeki kaynak siparişiyle eşleşecektir.

Tabindex içerik özniteliği, yazarların bir öğenin odaklanabileceği, sıralı odak gezinme kullanılarak erişilebileceği ve sıralı odakta gezinme amacıyla öğenin göreceli sırasının ne olacağı gibi bir öğenin odaklanıp odaklanmayacağını kontrol etmelerini sağlar. "Sekme dizini" adı, odaklanabilir öğeler arasında gezinmek için "sekme" tuşunun ortak kullanımından gelir. "Sekme" terimi, sıralı odak navigasyonunu kullanarak erişilebilen odaklanabilir elemanlar boyunca ilerlemeyi ifade eder.
W3C Öneri: HTML5
  Bölüm 7.4.1 Sıralı odakta gezinme ve tabindex özniteliği

tabindex 0 ya da herhangi bir pozitif tam sayı ile başlar ve yukarı doğru artırır. Önceden saklanan 0 değerini görmek yaygındır çünkü Mozilla ve IE'nin eski sürümlerinde, tabindex 1'de başlayacak, 2'ye geçecek ve sadece 2'den sonra 0'a ve sonra 3'e gidecektir. Bunun için maksimum tamsayı değeri tabindex olduğu 32767. Öğeler aynıysa tabindex daha sonra tabindex, işaretlemedeki kaynak sırasına uyacak. Negatif bir değer, elemanı sekme dizininden kaldırır, böylece hiçbir zaman odaklanmayacaktır.

Bir eleman atanmışsa tabindex arasında -1 elemanı kaldıracak ve hiçbir zaman odaklanmayacaktır, ancak program aracılığıyla öğeye odaklanılabilir. element.focus().

Belirtirseniz tabindex değer veya boş bir değer olmayan öznitelik göz ardı edilir.

Eğer disabled özniteliği, bir tabindex, öğe göz ardı edilecektir.


Eğer bir tabindex Tanımlanmış bir kod varsa, kodun geri kalanıyla ilgili olarak nerede bulunduğuna bakılmaksızın herhangi bir yere ayarlanır (altbilgide, içerik alanında, nerede olursa olsun) tabindexdaha sonra sekme sırası, en düşük şekilde açıkça atanan öğede başlayacaktır. tabindex 0'ın üzerinde bir değer. Daha sonra tanımlanmış olan elemanlar arasında dolaşır ve sadece açıktan sonra tabindex Öğeler sekmeli olarak girilmiş, belgenin başına dönecek ve doğal sekme sırasını takip edecektir.


HTML4 özelliklerinde yalnızca aşağıdaki öğeler tabindex özelliğini destekler: , , , , , , ve . Ancak, erişilebilirliği göz önünde bulundurarak HTML5 özellikleri, tüm öğelerin atanmasını sağlar 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ü hepsi atandıklarından bağımsız olarak tabindex="1"yine de aynı düzeni takip edecekler, ilki ilk, en sonuncusu ise. Bu aynı zamanda ..

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

çünkü varsayılan davranışı olan tabIndex öğesini açıkça tanımlamanıza gerek yoktur. bir div varsayılan olarak odaklanmayacak, anchor etiketler.


23
2018-02-01 19:21



IE ve Mozilla'nın hangi sürümleri başlatılır tabindex en 1 yerine 0 ? - arminrosu
1; Bu cevap biraz karıştı. IE ve Firefox'un "eski sürümlerinin" tabindex sekmesi yerine tabindex 1'de sekme başlangıcına sahip olduğundan bahsetmiştiniz ama ... herşey tarayıcılar, özelliklerin gerektirdiği gibi yapar! Kendinizle de çelişiyorsunuz, ilk önce " tabindex 0'da başlar " ama sonra söyleyerek "sekme sırası, en düşük şekilde açıkça atanan öğede başlayacaktır tabindex 0'ın üstündeki değer ". - Mark Amery


Sekme sırasını kontrol etme ( çıkıntı sayfadaki odağı hareket ettirmek için

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


18
2017-11-06 07:12



Ayrıca, tabindex'e sahip olmak fare tıklaması ile seçilebilir bir öğe yapar. (Noktalı anahatlar ekler, kullanarak tarz olabilir :focus) - user123444555621
@ Pumbaa80 Yine de herhangi bir giriş öğesini fare tıklamasıyla seçebilirsiniz ve aynı şey ": focus" CSS'yi kullanmak için de geçerlidir. Tabindex özniteliği isteğe bağlıdır. - Drew
Bu sadece giriş elemanları için geçerli. Benim yorumum her türlü eleman için geçerlidir. Görmek jsfiddle.net/XsYCj örnek olarak. - user123444555621


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'ya, sonra #awesome, sonra #bar'a hareket edecektir.

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

Sekme endekslerini herhangi bir yerde tanımlamamışsanız, klavye odağı, HTML belgesinde tanımlandıkları sırayla sayfanızın HTML etiketlerini takip edecektir.

Sekmexleri belirttiğinizden daha fazla kez işaretlerseniz, odak sekmeyle işaretlenmemiş gibi hareket eder, yani HTML etiketlerinin görünümü sırasına göre


8
2017-08-15 09:31





Varsayılan form elemanı odak navigasyon sırasını değiştirmek için kullanılabilir.

Yani eğer sahipseniz:

text input A

text input B

submit button C

Sekme tuşunu kullanarak A-> B-> C ile ilerlersiniz. Tabindex bu akışı değiştirmenizi sağlar.


3
2017-11-06 07:11





Normalde, kullanıcı bir formdaki alandan alana sekme yaptığında (tüm tarayıcıların sekmesine izin veren bir tarayıcıda), sipariş alanların HTML kodunda görünme sırasıdır.

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

Bu konuda daha fazla bilgi burada bulunabilir w3 

başka iyi bir örnek bulunabilir İşte


3
2017-11-06 07:16





Basit bir deyişle, tabindex elemanlara odaklanmak için kullanılır. Sözdizimi: tabindex="numeric_value" Bu numeric_value elemanın ağırlığıdır. İlk önce daha düşük değere erişilecek.


2
2018-03-20 00:11



"İlk önce daha düşük bir değere erişilecek." - tam olarak doğru değil; 0 ve negatif değerler özel anlamlara sahiptir. - Mark Amery


HTML tabindex belirten göstermek Bir öğeye klavye gezinme yoluyla erişilebiliyorsa. Kullanıcı bastığında Tab tuşu  odak kaydırılır bir elementten diğerine. Tabindex atribute kullanarak sekme sırası akışı kaydırılır. 


1
2018-05-04 09:12





Kontrollerden sekme yapmak genellikle HTML kodunda göründükleri sırayla olur.

Tabindex kullanarak, sekme işlemi sekindex sekans sıralamasındaki en yüksek tabindex ile en alttaki tabindex ile kontrolden akacaktır.


0
2017-11-06 07:13