Що таке атрибут HTML tabindex?

Для чого tabindexвикористовується атрибут у HTML?

tabindexє глобальним атрибутом, відповідальним за дві речі:

1. він встановлює порядок "фокусуються" елементів і
2. це робить елементи "орієнтованими" .

На мій погляд, друга річ навіть важливіша, ніж перша. Є дуже мало елементів, орієнтованих за замовчуванням (наприклад, <a> та елементи керування формою). Розробники дуже часто додають деякі обробники подій JavaScript (наприклад, "onclick") на не фокусуються елементи (<div>, <span> і так далі), і спосіб зробити ваш інтерфейс чуйним не тільки до подій миші, але і до подій клавіатури (наприклад, «onkeypress») - це зробити такі елементи фокусними. Нарешті, якщо ви не хочете встановлювати порядок, а просто зробите ваш елемент зосередженим на використанні tabindex="0"всіх таких елементів:

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

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

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

Коли користувач натискає кнопку вкладки, користувач буде переведений через форму в порядку 1, 2 і 3, як зазначено в прикладі нижче.

Наприклад:

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

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

Атрибут вмісту tabindex дозволяє авторам контролювати, чи повинен елемент бути орієнтованим, чи він може бути доступний за допомогою навігації по послідовному фокусуванню та яким має бути відносний порядок елемента для цілей послідовної навігації по фокусу. Назва "індекс вкладки" походить від загального використання клавіші "вкладка" для навігації по фокусуються елементах. Термін "вкладка" відноситься до руху вперед через фокусуються елементи, до яких можна дійти за допомогою послідовної навігації по фокусуванню.
Рекомендація W3C: HTML5
Розділ 7.4.1 Послідовна навігація по фокусу та атрибут tabindex

В tabindexпочинається з 0 або будь-яким позитивним цілим числом і приріст вгору. Це часто можна побачити значення 0 уникнути , тому що в старих версіях Mozilla і IE, то TabIndex буде починатися з 1, перехід на 2, і тільки після того, як 2 буде він йти до 0 , а потім 3. Максимальна ціле значення для tabindexце 32767. Якщо елементи однакові, tabindexто tabindex буде відповідати вихідному порядку в розмітці. Від'ємне значення видалить елемент з індексу вкладки, тому він ніколи не буде зосереджений.

Якщо елемент присвоюється tabindexз -1нього буде видалити елемент , і він ніколи не буде фокусування , але фокус може бути дан елемент програмно з допомогою element.focus().

Якщо вказати tabindexатрибут без значення або порожнього значення, він буде ігнорований.

Якщо disabledатрибут встановлений на елементі, який має a tabindex, елемент буде ігноруватися.

Якщо a tabindexвстановлено де-небудь на сторінці, незалежно від того, де він знаходиться відносно решти коду (він може бути у нижньому колонтитулі, області вмісту, коли-небудь), якщо є визначений tabindex, порядок вкладки розпочнеться з елемента якому явно присвоєно найнижче tabindexзначення вище 0. Потім воно буде проходити через визначені елементи і лише після того, як явні tabindexелементи будуть вкладені, повернеться до початку документа і дотримуватиметься природного порядку вкладки.

У специфікації HTML4 лише такі елементи підтримують атрибут tabindex: якір, область, кнопка, вхід, об’єкт, виберіть, і textarea. Але специфікація HTML5, маючи на увазі доступність, дозволяє призначити всі елементи tabindex.

-

Наприклад

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

те саме, що

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

тому що незалежно від того, що всі вони призначені tabindex="1", вони все одно будуть виконувати той самий порядок, перший - перший, а останній - останній. Це теж саме ..

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

тому що вам не потрібно чітко визначати tabIndex, якщо це поведінка за замовчуванням. A divза замовчуванням не буде орієнтованим, anchorтеги будуть.

Контроль порядку вкладки (натискання tabклавіші для переміщення фокусу) на сторінці.

Довідка: http://www.w3.org/TR/html401/interact/forms.html#h-17.11.1

задані значення визначають порядок того, як фокус клавіатури буде переміщуватися між елементами на веб-сайті.

У наступному прикладі, при першому натисканні вкладки курсор переміститься на #foo, потім #awesome, потім #bar

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

Якщо ви ніде не визначили індекси вкладок, фокус клавіатури буде слідкувати за тегами HTML вашої сторінки у тому порядку, у якому вони визначені в документі HTML.

Якщо ви вкладете більше разів, ніж ви вказали для tabindexes, фокус переміститься так, як ніби не було tabindexes, тобто в порядку появи тегів HTML

За допомогою нього можна змінити навігаційну послідовність фокусування елемента форми за замовчуванням.

Тож якщо у вас є:

text input A

text input B

submit button C

за допомогою клавіші вкладки ви переходите через A-> B-> C. Tabindex дозволяє змінити цей потік.

Зазвичай, коли користувач вкладає від поля до поля у формі (у браузері, який дозволяє вкладки, не всі браузери), це порядок - це порядок, що поля відображаються в коді HTML.

Однак іноді потрібно, щоб порядок вкладок протікав трохи інакше. У цьому випадку ви можете нумерувати поля за допомогою TABINDEX. Потім вкладки переходять у порядку від найнижчого до TABINDEX до найвищого.

Більше інформації про це можна знайти тут w3

ще одну хорошу ілюстрацію можна знайти тут

Простими словами, tabindexвикористовується для орієнтації на елементи. Синтаксис: tabindex="numeric_value" Це numeric_valueвага елемента. Нижче буде доступний перший.

Атрибут HTML tabindex несе відповідальність за вказівку того, що елемент доступний за допомогою навігації на клавіатурі . Коли користувач натискає кнопку Tab фокус зміщується від одного елемента до іншого. Використовуючи атрибут tabindex, порядок руху вкладок зміщується.

Вкладка через елементи керування зазвичай відбувається послідовно, оскільки вони відображаються в HTML-коді.

Використовуючи tabindex, вкладка буде переходити від управління з найнижчим tabindex до елемента контролю з найвищим tabindex в послідовному порядку tabindex