Як ігнорувати HTML-елемент від tabindex?

Чи є в HTML спосіб сказати браузеру не забороняти індексацію вкладок на окремих елементах?

На моїй сторінці, хоча є бічне шоу, яке відображається за допомогою jQuery, під час вкладки через нього ви отримуєте безліч натискань на вкладках, перш ніж керування вкладкою перейде до наступного видимого посилання на сторінці, оскільки всі речі, що перебувають на вкладці, приховані до користувач візуально.

Можна використовувати tabindex="-1".

Специфікація W3C HTML5 підтримує негативні tabindexзначення:

Якщо значення є від'ємним цілим числом,
Агент користувача повинен встановити прапор фокусування табіндекса елемента, але не повинен дозволяти досягти елемента за допомогою послідовної навігації по фокусуванню.

Зверніть увагу, що це функція HTML5 і може не працювати зі старими браузерами.
Щоб відповідати стандарту W3C HTML 4.01 (з 1999 р.) , Tabindex повинен бути позитивним.

Зразок використання нижче в чистому HTML.

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

Не забувайте, що, незважаючи на те tabindex, що всі параметри в специфікаціях та в HTML, у JavaScript / DOM це властивість називається tabIndex.

Не втрачайте розуму, намагаючись з’ясувати, чому ваші програмно-змінені індекси викликів element.tabindex = -1не працюють. Використовуйте element.tabIndex = -1.

Якщо це природні елементи в порядку вкладки, такі як кнопки та анкери, видалення їх із порядку вкладки за допомогою tabindex = -1 є своєрідним запахом доступності. Якщо вони надають дублікати функціональності, видаляючи їх з порядку вкладки, це нормально, і подумайте про додавання до цих елементів aria-hidden = true, щоб допоміжні технології їх ігнорували.

Якщо ви працюєте у веб-переглядачі, який не підтримує tabindex="-1", можливо, вам вдасться піти, просто надавши речі, які потрібно пропустити, дійсно високий індекс вкладки . Наприклад, в tabindex="500"основному переміщується порядок вкладки об'єкта до кінця сторінки.

Я зробив це для довгої форми для введення даних із кнопкою, накинутою посередині. Це не кнопка, яку люди клацають дуже часто, тому я не хотів, щоб вони випадково клацнули на ній і натиснули клавішу Enter. disabledне працює, тому що це кнопка.

Такий хак, як "tabIndex = -1", не працює для Chrome v53.

Ось що працює для хромування та більшості браузерів:

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>

Спосіб зробити це шляхом додавання tabindex="-1". Додавши це до певного елемента, він стає недоступним за допомогою навігації на клавіатурі. Існує велика стаття тут , яка допоможе вам у подальшому зрозуміти TabIndex .

Просто додайте атрибут disabledдо елемента (або використовуйте jQuery для цього). Disabled (Заборонено) запобігає зосередженню або вибору входу взагалі.