Атрибут tabindex

Атрибут 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 нет):

: