Атрибут tabindex устанавливает порядок
получения фокуса при переходе между элементами
с помощью клавиши Tab.
Нажимая эту клавишу можно активировать последовательно некоторые элементы страницы (ссылки и элементы форм). Активные элементы будут получать фокус ввода.
Для полей ввода типа input
и textarea
фокус будет выражаться в том, что в поле
будет моргать курсор и в него можно будет
вводить текст, для
ссылок и других элементов это
будет выделение каким-то образом (подчеркивание,
обведение пунктирной границей и т.п., зависит
от браузера).
Чтобы поменять стили по умолчанию для элемента в фокусе смотрите псевдокласс focus.
Если в момент получения фокуса элемент не был виден на странице (из-за прокрутки), то страница прокрутится к этому элементу.
Если элементам не задан атрибут tabindex
или он имеет значение 0, то переход
по ним клавишей Tab будет идти в порядке
следования элементов в HTML коде.
Если на странице есть элементы, которым задан
tabindex, то вначале переход будет
идти по ним, начиная от меньшего значения
атрибута tabindex (самым маленьким
может быть единица) и так далее по возрастанию
значений атрибута, а когда такие элементы
закончатся - переход пойдет по тем элементам,
которым не задан tabindex или он имеет
значение 0.
Значением атрибута служат целые числа от
1 до бесконечности. Если какие-то
номера пропущены - ничего страшного не случится
(к примеру, если нет номера 2, то
сначала фокус попадет на элемент с tabindex,
равным 1, а потом на элемент с tabindex,
равным 3).
Если на странице в момент нажатия клавиши
Tab есть элемент в фокусе (фокус мог
быть получен не только нажатием Tab,
но и кликом мышкой по элементу или атрибутом
autofocus),
то следующее нажатие клавиши Tab приведет
к тому, что фокус получит следующий по порядку
элемент после того, который в фокусе (к примеру,
если сейчас в фокусе элемент с tabindex
3, то следующим получит фокус элемент
с tabindex 4).
Если полю ввода задан атрибут disabled,
то оно будет проигнорировано переходами через
клавишу Tab, даже если этому полю задан атрибут
tabindex.
Атрибут tabindex применяется к тегам
a,
input,
textarea,
button,
select,
area.
Пример
Давайте инпутам
зададим атрибут tabindex. Понажимайте
последовательно клавишу Tab и вы увидите,
как фокус ввода будет переходить от первого
инпута к четвертому, а потом пойдет по ссылкам
с начала страницы (так как больше элементов
с заданным атрибутом tabindex нет):
<input type="text" tabindex="3" placeholder="Номер элемента: 3">
<input type="text" tabindex="1" placeholder="Номер элемента: 1">
<input type="text" tabindex="2" placeholder="Номер элемента: 2">
<input type="text" tabindex="4" placeholder="Номер элемента: 4">
: