2011-02-11 33 views
34

Tabindex'i CSS ile kontrol etmek mümkün mü ve evet, hangi tarayıcıları destekliyor ve hangi öğeler üzerinde?tabindex

DÜZENLEME

Ben amacım bir div etkinlikleri keydown yakalamak demeliyim. Bu sayfayı, klavye olaylarını test eden http://www.quirksmode.org/js/events/keys.html#'u gördüm ve bu belge, belgenin ve gövdenin ya da bir çeşit form öğesinin ya da bağlantısının dışındaki herhangi bir şeye tek tuşla basılmasının, tabindex üzerinde bildirilmiş olduğunu gösteriyor. Ama W3C sitesinde okuyun:

aşağıdaki unsurları tabindex niteliğini destekler: A, ALANI, BUTTON, INPUT, OBJECT, seçin ve textarea.

Bu yüzden biraz kafam karıştı, standartlara uymak ve kullanım durumumun işe yaraması için ne yapmalıyım?

EDIT2

Benim bütün kullanım durumunda yapay kaydırma çubuğu ile içerik bir sürü div olduğunu. Bunu fare olaylarıyla kaydırabilirim, ancak klavye ile bugüne kadar hiç şansım yok.

+1

yakalamak klavye olayları kullanımınız söz konusu değildir. Kullanım durumunu yanıtlamaya çalıştığınız bir uygulama detayıdır. Farklı şekilde cevap ver. (Size gerçek kullanım durumunun ne olduğunu bize söylemediğinden dolayı size pek tavsiye veremeyiz). – Quentin

cevap

25

CSS3-UI numaralı telefondan W3C tarafından tanıtılan nav-index mülkiyetine bakın.

Bu özellik, tabindex ile aynı davranışa sahiptir ve herhangi bir öğeye uygulanabilir.

"nav-index" özelliği, sıralı gezinme sırasını ("sekme sırası" olarak da bilinir) belirtmenin bir giriş yöntemi-nötr yoludur. Bu özellik muhtemelen en iyi standartlara uygun kullanım durumu için çözüm, nav-index (Haziran 2012 itibarıyla) şimdiye kadar sadece Opera tarafından yorumlanır ve mesafesindedir HTML4/XHTML1 niteliği 'tabindex'

olmak yerine geçer Ayrıca W3C tarafından "Risk altında özellik" olarak işaretlenir, bu nedenle herhangi bir zamanda bırakılabilir.

Alternatif çapraz tarayıcı çözümleridir:

  • olmayan standartlara uyumlu: Bir DIV üzerine tabindex niteliğini ayarlayın. Bu, tüm yaygın tarayıcılarda çalışacaktır.

  • standartlara uyumlu: display: block ile stile, bir href nitelik kümesi olmadan bir çapa elemanı (A) tarafından DIV değiştirip tabindex niteliğini ekleyin. BoltClock's noktası ile ilgili olarak

, bir sekme sırası (metin seçim sırası ve düzeni sekme hem yakın elemanları belgede aranged edildiği diziye ilişkilidir) çok mantıklı olduğu konusunda hemfikirdir. Öte yandan, CSS bugün daha geniş bir amaca sahiptir. Yalnızca bir belgenin içeriğini (content özelliği) değil, aynı zamanda olayların ne zaman tetikleneceğini de (örneğin, pointer-events, display veya z-index kullanarak) işaretleyici olayının sırası değişebilir. Bunlar çok temel CSS özellikleriyse, neden KeyBoardEvents'ları da etkileyememeniz gerekir?yorumlarında @Wallop işaret ettiği gibi


Güncelleme 2017

, nav-index özellik nedeniyle "uygulanması ilgisizliği" ile 2015 yılında dropped from the spec oldu.

+1

Bazı nedenlerden dolayı 'tabindex' HTML5'deki tüm öğelere izin verildiğini duyuyorum. – BoltClock

+5

Nisan 2014 itibarıyla, 'nav-index' hala tarayıcı desteği bulunmuyor. :( –

+2

@JeremyWest 'nav-index' kulağa hoş geliyor, ancak herhangi bir tarayıcı tarafından hala desteklenmiyor gibi görünüyor (http://www.w3schools.com/cssref/css3_browsersupport.asp) –

8

Bu biraz eski ama şimdi -moz-user-focus gibi css seçenekleri var. Eminim webkit eşdeğeri vardır. div üzerinde

https://developer.mozilla.org/en-US/docs/CSS/-moz-user-focus

+7

Sadece aynı sorunu yaşıyordum ve kullanıcıyla cevap vermek istedim. Bu stackoverflow konuları bing ve google'da uzunca bir yer buluyor, bu yüzden cevabı buraya eklemek istedim – Noitidart

+0

Ama, Bunu nasıl kullanıyorsun? MDN sayfası çok iyi açıklamıyor ... – SamB

+0

@SamB set -moz-user-focus: yok 'veya' -moz-user-focus: -moz-none' veya 'user-focus: none' sizin için öğesi. “kullanıcı odaklı” standartlaştırılmış yoldur. – Noitidart

İlgili konular