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

Ответы:

301

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>
Константин Смолянин
источник
2
Я узнал, что <div tabindex>также работает. Есть ли причина не использовать это?
Данияр
5
Использование tabindex -1 удобно для таких вещей, как пропуск ссылок. Вы можете сделать ссылку на элемент на что-то прямо над контентом, на который вы пытаетесь связать пользователя, без того, чтобы сама ссылка на элемент была доступна.
Бретт
4
Стоит отметить - и ответ, вероятно, следует исправить - что значение -1не подходит, когда вы «не хотите, чтобы оно было сфокусировано», а скорее, когда вы хотите предотвратить фокусировку в результате навигации с помощью клавиатуры. Элемент все еще может быть сфокусирован, но не с помощью клавиатуры.
атп
2
@danijar да: это нарушение спецификации. Согласно html.spec.whatwg.org/multipage/… , «атрибут tabindex, если он указан, должен иметь значение, которое является допустимым целым числом» .
Марк Амери
На этом -1мой поиск решения для предметов, которые занимают абсолютную позицию и ведет себя забавно, когда фокусируется на вкладке! HOorraaayyyyy.
Джон Мутума
54

Когда пользователь нажимает кнопку вкладки, пользователь будет принят через форму в порядке 1, 2 и 3, как указано в примере ниже.

Например:

Name: <input name="name" tabindex="1"  />
Age: <input name="age" tabindex="3"  />
Email: <input name="email" tabindex="2"  />
Роберт
источник
-> Что если tabindex равен -1? Что это означает?
7
@AlyssaGono вы, кажется, не читали ответ с 85 ответами «вверх» ... tabindex = -1 означает, что вы не можете достичь этого элемента нажатием кнопки табуляции
Джон Радделл
24

используется для определения последовательности, которой следуют пользователи, когда они используют клавишу 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: , , , , , , и , Но спецификация 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теги будут.

davidcondrey
источник
Какие версии IE и Mozilla начать tabindexна 1 вместо 0 ?
arminrosu
-1; этот ответ немного запутан. Вы упоминаете, что в «старых версиях» IE и Firefox вкладки начинаются с tabindex 1 вместо tabindex 0 ... но это то, что делают все браузеры, как того требует спецификация! Вы также противоречите себе: сначала говорите « tabindexначинается с 0», а потом говорите «порядок табуляции будет начинаться с элемента, которому явно присваивается самое низкое tabindexзначение выше 0» .
Марк Амери
18

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

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

Том
источник
6
Кроме того, наличие tabindex делает элемент выбираемым щелчком мыши. (Добавляет пунктирные контуры, можно стилизовать с помощью :focus)
user123444555621
@ Pumbaa80 Вы можете в любом случае выбрать любой элемент ввода, щелкнув мышью, и то же самое касается использования CSS ": focus". Атрибут tabindex является необязательным.
Дрю
6
Это относится только к элементам ввода. Мой комментарий относится к любому типу элементов. См. Jsfiddle.net/XsYCj для примера.
user123444555621
8

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

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

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

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

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

Eldamir
источник
3

Его можно использовать для изменения последовательности навигации по умолчанию для элемента формы по умолчанию.

Итак, если у вас есть:

text input A

text input B

submit button C

с помощью клавиши табуляции вы перемещаетесь по A-> B-> C. Tabindex позволяет вам изменить этот поток.

cherouvim
источник
3

Обычно, когда пользователь выполняет переход от поля к полю в форме (в браузере, который допускает вкладку, а не во всех браузерах), порядок - это порядок отображения полей в HTML-коде.

Однако иногда вы хотите, чтобы порядок табуляции проходил немного по-другому. В этом случае вы можете нумеровать поля, используя TABINDEX. Затем вкладки перемещаются в порядке от самого низкого TABINDEX до самого высокого.

Более подробную информацию об этом можно найти здесь w3

еще одна хорошая иллюстрация может быть найдена здесь

Мульки
источник
2

Простыми словами, tabindexиспользуется, чтобы сосредоточиться на элементах. Синтаксис: tabindex="numeric_value" это numeric_valueвес элемента. Нижнее значение будет доступно первым.

Аман Дханда
источник
«Нижнее значение будет доступно первым». - не совсем верно; 0 и отрицательные значения имеют особые значения.
Марк Амери
1

Атрибут HTML tabindex отвечает за указание того, доступен ли элемент с помощью клавиатуры . Когда пользователь нажимает клавишу Tab фокус сдвигается от одного элемента к другому. При использовании атрибута tabindex поток заказа вкладок смещается.

Неша Зорич
источник
0

Вкладка через элементы управления обычно происходит последовательно, как они появляются в коде HTML.

Используя tabindex, табуляция будет переходить из элемента управления с самым низким tabindex в элемент управления с самым высоким tabindex в последовательном порядке tabindex

Камаль
источник