Что такое атрибут HTML tabindex?

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: anchor, area, button, input, объект, выберите и 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

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

В следующем примере, когда вы в первый раз нажимаете вкладку, ваш курсор переместится на #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.