Что такое атрибут 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"  />

TabIndexиспользуется для определения последовательности, которой следуют пользователи, когда они используют клавишу 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атрибут установлен для элемента, который имеет tabindex, элемент будет игнорироваться.

Если в 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, если это поведение по умолчанию. А divпо умолчанию не будет фокусироваться, anchorтеги будут.

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

Ссылка: http://www.w3.org/TR/html401/interact/forms.html#h-17.11.1

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

В следующем примере при первом нажатии клавиши tab курсор переместится на #foo, затем #awesome, затем #bar

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

Если вы нигде не определили индексы вкладок, фокус клавиатуры будет следовать тегам HTML вашей страницы в том порядке, в котором они определены в документе HTML.

Если вы вкладываете больше раз, чем указали для таблиц, фокус будет перемещаться, как если бы не было таблиц, то есть в порядке появления тегов 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