Атрибут tabindex

Атрибут tabindex устанавливает порядок перехода между некоторыми элементами в документе клавишей "Tab". Процесс перехода происходит по клавише "Tab" от более меньшего значения к следующему большему, причем последовательность неважна. Допускается пропуск любого количества чисел в последовательности. Например индексы у элементов могут быть с такими значениями. 10, 11, 12, 13, 20. При совпадении значений в индексе будет учитываться порядок объявления элементов в документе.

Для спецификации HTML4.01 атрибут tabindex можно применять к следующим элементам: <a>, <area>, <button>, <input>, <object>, <select>, <textarea>.  

Для спецификации HTML5  атрибут tabindex можно применять к следующим элементам:  

  • <a> элемент, имеющий href атрибут
  • <link> элемент, имеющий href атрибут
  • <button>
  • <input> 
  • <select>
  • <textarea>
  • <menuitem>
  • элементы с атрибутом draggable, если это позволит пользователю начинать операцию перетаскивания элемента, без устройства типа мышь.
  • просмотр контекстных контейнеров
  • редактирование host 

Значения

  • Принимает значение от 0 до 32767 индекс для перехода.
  • Если указано отрицательное значение, то это означает, что элемент может принимать фокус, но переход на него с помощью клавиатуры невозможен
  • Если значение равно 0 - то такой элемент получит фокус последним.

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

0

Обязательный атрибут

нет

Синтаксис

   tabindex="целое число"

Спецификация

версия HTML 3.2 HTML 4.01 HTML 5.0 XHTML 1.0 XHTML 1.1
поддержка да да да да да

Поддержка браузерами

браузер IE Chrome Opera Firefox Safari
версия 6.0+ 2.0+ 4.0+ 9.2+ 1.0+
поддержка да да да да да

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут tabindex</title>
 </head>
 <body>
    <p>Эта кнопка имеет значение tabindex равным 1</p>
      <p><button tabindex="1">Кнопка 1</button></p
    <p>Эта кнопка имеет значение tabindex равным 0. Она получит фокус последней при переходе по TAB</p> 
       <p><button tabindex="0">Кнопка 2</button></p>
     <p>Эта кнопка имеет значение tabindex равным 5</p>
       <p><button tabindex="5">Кнопка 3</button></p>
     <p>Эта кнопка имеет отрицательное значение tabindex. При переходе по Tab она фокус не получит</p>
       <p><button tabindex="-1">Кнопка 4</button></p>
 </body>
</html>
Результат примера атрибута tabindex
Рис.1 Результат примера атрибута tabindex.