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

Что такое атрибут tabindex, используемый в HTML?

Ответ 1

tabindex - это глобальный атрибут, отвечающий за две вещи:

устанавливает порядок "фокусируемых" элементов и
это делает элементы "фокусируемыми".

На мой взгляд, вторая вещь даже важнее первой. По умолчанию очень мало элементов, которые можно фокусировать (например, <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

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

Например:

Name: <input name="name" tabindex="1"  />
Age: <input name="age" tabindex="3"  />
Email: <input name="email" tabindex="2"  />

Ответ 3

tabindex используется для определения последовательность, которой следуют пользователи, когда они используют клавишу Tab для перемещения по странице. По умолчанию естественный порядок табуляции будет соответствовать порядку источника в разметке.

Атрибут контента tabindex позволяет авторам контролировать, должен ли элемент быть ориентируемым, должен ли он быть доступен, используя последовательную навигацию по фокусу, и каков должен быть относительный порядок элемента для целей последовательной навигации фокусировки, Имя "индекс вкладки" происходит от общего использования клавиши "табуляция" для перемещения по элементам, которые можно сфокусировать. Термин "табуляция" относится к перемещению вперед через фокусируемые элементы, которые могут быть достигнуты с помощью последовательной навигации фокусировки.
Рекомендация W3C: HTML5
Раздел 7.4.1 Навигация последовательной фокусировки и атрибут tabindex

tabindex начинается с 0 или любого положительного целого числа и увеличивается вверх. Общеизвестно, что значение 0 избегается, потому что в более старых версиях Mozilla и IE табуиндекс начинался с 1, переходим к 2, и только после того, как 2 будет идти до 0, а затем 3. Максимальное целочисленное значение для tabindex 32767. Если элементы имеют одинаковый tabindex, то tabindex будет соответствовать порядку источника в разметке. Отрицательное значение удалит элемент из индекса табуляции, чтобы он никогда не фокусировался.

Если элементу присвоен tabindex of -1, он удалит элемент, и он никогда не будет фокусироваться, но фокус может быть присвоен элементу программным способом с помощью element.focus().

Если вы укажете атрибут tabindex без значения или пустого значения, он будет проигнорирован.

Если атрибут disabled задан для элемента с tabindex, элемент будет проигнорирован.

Если a tabindex установлен в любом месте страницы независимо от того, где он относится к остальной части кода (он может быть в нижнем колонтитуле, области содержимого, где-бы), если есть определенный tabindex то порядок табуляции начинается с элемента, которому явно присваивается наименьшее значение tabindex выше 0. Затем он будет циклически проходить через определенные элементы и только после того, как явные элементы tabindex будут пропущены, вернется ли он к началу документа и следуйте порядку естественной табуляции.

В спецификации HTML4 только атрибуты tabindex поддерживают следующие элементы: anchor, area, button, input, object, select и 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, если оно по умолчанию. A div по умолчанию не будет настраиваться, теги anchor будут.

Ответ 4

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

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

Ответ 5

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

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

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

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

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

Ответ 6

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

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

text input A

text input B

submit button C

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

Ответ 7

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

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

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

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

Ответ 8

В простых словах tabindex используется для фокусировки на элементах. Синтаксис: tabindex="numeric_value" Это numeric_value - вес элемента. Вначале будет доступно более низкое значение.

Ответ 9

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

Ответ 10

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

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