HTML öğesini tabindex'ten nasıl yok sayabilirim?

HTML'de tarayıcıya belirli öğeler üzerinde sekme dizine eklemeye izin vermemesini söylemenin bir yolu var mı?

Sayfamda jQuery ile oluşturulan bir kenar gösterisi olsa da, sekme işleminde sekme denetimi sayfadaki bir sonraki görünür bağlantıya geçmeden önce sekme denetimi sayfadaki bir sonraki görünür bağlantıya geçmeden önce çok sayıda sekme basımı alırsınız kullanıcı görsel olarak.

Kullanabilirsiniz tabindex="-1".

W3C HTML5 özellikleri olumsuz destekler tabindexdeğerleri:

Değer negatif bir tamsayı ise
Kullanıcı aracısı öğenin tabindex odak bayrağını ayarlamalı, ancak sıralı odak gezinme özelliğini kullanarak öğeye erişilmesine izin vermemelidir.

Bunun bir HTML5 özelliği olduğunu ve eski tarayıcılarda çalışmayabileceğini unutmayın.
Olmak (1999) W3C HTML 4.01 standart şikayette, tabindex pozitif olması gerekir.

Saf HTML'de aşağıdaki örnek kullanım.

<input />
<input tabindex="-1" placeholder="NoTabIndex" />
<input />

tabindexÖzelliklerde ve HTML'de tüm küçük harf olmasına rağmen , Javascript / DOM'da bu özelliğin çağrıldığını unutmayın tabIndex.

Neden programlı olarak değiştirilmiş sekme indekslerinizin neden çalışmadığını anlamaya çalışırken zihninizi kaybetmeyin element.tabindex = -1. Kullanın element.tabIndex = -1.

Bunlar doğal olarak sekme sırasında düğmeler ve çapalar gibi öğelerse, bunları sekme düzeninden tabindex = -1 ile kaldırmak bir tür erişilebilirlik kokusudur. Yinelenen işlevsellik sağlıyorsa, bunları sekme sırasından kaldırmak tamamdır ve yardımcı öğelerin yok sayacağı şekilde bu öğelere aria-hidden = true eklemeyi düşünün.

Desteklemeyen bir tarayıcıda çalışıyorsanız, gerçekten yüksek bir sekme dizinitabindex="-1" atlanması gereken şeyleri vermekle kurtulabilirsiniz . Örneğin, temel olarak nesnenin sekme sırasını sayfanın sonuna taşır.tabindex="500"

Bunu, ortasında atılan bir düğme ile uzun bir veri giriş formu için yaptım. İnsanların çok sık tıkladıkları bir düğme değil, bu yüzden yanlışlıkla sekmeye ve enter tuşuna basmalarını istemedim. disabledişe yaramaz çünkü bu bir düğme.

"TabIndex = -1" gibi bir hack, Chrome v53 ile benim için çalışmıyor.

Chrome ve çoğu tarayıcı için çalışan budur:

function removeTabIndex(element) {
    element.removeAttribute('tabindex');
}

<input tabIndex="1" />
<input tabIndex="2" id="notabindex" />
<input tabIndex="3" />
<button tabIndex="4" onclick="removeTabIndex(document.getElementById('notabindex'))">Remove tabindex</button>

Bunu yapmanın yolu eklemektir tabindex="-1". Bunu belirli bir öğeye ekleyerek , klavye gezinmesi tarafından erişilemez hale gelir . Tabindex'i daha iyi anlamanıza yardımcı olacak harika bir makale var .

Özniteliği disabledöğeye eklemeniz yeterlidir (veya bunu sizin için yapmak için jQuery kullanın) Devre Dışı, girdinin odaklanmasını veya seçilmesini engeller.