Атрибут tabindex у HTML — порядок переходу по Tab
Опис та застосування
Атрибут tabindex встановлює порядок отримання фокусу при переході між елементами за допомогою клавіші Tab. Перехід відбувається від меншого значення до більшого, наприклад від 1 до 2, потім до 3 і так далі. При цьому сувора послідовність не важлива, допускається пропускати якісь числа і починати з будь-цифри. Якщо значення tabindex у елементів збігаються, тоді враховується їх порядок появи в коді. Заблоковані елементи (у яких встановлено атрибут disabled) не беруть участі в переході і фокус не отримують.
Загальний опис
автор: NagarD
- Порада
-
Максимальне значення не повинно перевищувати 32767.
автор: NagarD - Порада
-
Прибираємо або стилизуємо фокус елемену
автор: NagarDli:focus, li:focus-visible { outline: none; }
Синтаксис
<element tabindex = "number">Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1.5 | 3.1 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
Натисніть Tab кілька разів і подивіться на порядок. Кнопка з tabindex="5" стоїть у розмітці третьою, але фокус отримує першою. Останні два блоки показують, що tabindex="0" дає фокус — і тільки фокус.
HTML
<p>Натисніть <kbd>Tab</kbd> і подивіться, куди піде фокус.</p>
<button tabindex="0">1. Природний порядок (tabindex=0)</button>
<button tabindex="0">2. Природний порядок (tabindex=0)</button>
<button tabindex="5">А сюди фокус потрапить ПЕРШИМ (tabindex=5)</button>
<div class="box" tabindex="0">div із tabindex=0: фокус є, але Enter нічого не робить</div>
<div class="box">звичайний div: фокус до нього не дійде</div>CSS
button, .box {
display: block;
width: 100%;
margin: 8px 0;
padding: 10px 12px;
font: inherit;
text-align: left;
border: 1px solid #999;
border-radius: 6px;
background: #fff;
}
.box { background: #f6f6f6; }
:focus-visible { outline: 3px solid #2d6cdf; outline-offset: 2px; }Приклад використання tabindex
<p>Нажміть на кнопку TAB щоб перейти між елементами</p>
<input value ="tabindex 1" tabindex="1" type="button"> </br>
<input value ="tabindex 2" tabindex="2" type="button"> </br>
<input value ="tabindex 10" tabindex="10" type="button"> </br>
<input value ="tabindex 8" tabindex="8" type="button"> </br>Коментарі
Коментарів ще немає — будьте першим!