HTML :: Атрибут tabindex

В HTML универсальный атрибут tabindex (от англ. tab index – индекс учета) определяет последовательность получения фокуса при переходе между элементами с помощью клавиши «Tab».

Синтаксис

...

Значения

В качестве значения атрибут принимает любое положительное целое число или нуль. По умолчанию у всех элементов значение принимается равным нулю. Поэтому, когда мы нажимаем клавишу «Tab», браузер начинает передавать фокус элементам в порядке их появления в коде. Если же значение атрибута tabindex некоторых элементов отлично от нуля, то браузер начинает передавать фокус от элементов с меньшим значением к элементам, у которых значение атрибута больше. При этом допускается пропускать некоторые цифры. В любом случае браузер будет искать элемент со следующим наименьшим значением tabindex. Когда все элементы со значением атрибута отличным от нуля закончатся, браузер начнет передавать фокус элементам, у которых атрибут tabindex не задан или равен нулю, при чем в той последовательности, в которой они встречаются в коде.

Значение по умолчанию: 0.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Общие_атрибуты/tabindex

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">    
    <title>tabindex|Пример №1</title>
</head>
<body>

<p contenteditable="true" tabindex="1">
	Для перехода между элементами нажмите Tab.
</p>
   		
<p contenteditable="true" tabindex="3">
	Этот абзац будет получать фокус последним, 
	т.к. он имеет наибольший tabindex равный 3.
</p>

<p contenteditable="true" tabindex="2">
	Этот абзац будет получать фокус вторым, 
	хотя он идет на странице третим,
	т.к. он имеет tabindex="2".
</p>

</body>
</html>

Пример №1