tabindex — Веб-технологии для разработчиков

Вы читаете английскую версию этой статьи, так как пока нет перевода на данный язык. Помогите нам перевести эту статью!

Максимальное значение для tabindex не должно превышать 32767 (W3C 17.11.1)

Глобальный атрибут tabindex — целое число, определяющее должен ли данный элемент участвовать в последовательной навигации по всей странице с помощью клавиатуры, в каком порядке. Содержит одно из нескольких видов значений:

  • если представлено отрицательное значение – элемент может быть выделен, однако не участвует в последовательной навигации;
  • если представлен 0 – элемент может быть выделен и достигнут с помощью последовательной навигации, однако порядок навигации определён платформой;
  • если представлено положительное целое значение – элемент будет достигнут (и выделен) с помощью последовательной навигации, а порядок навигации определён этим самым значением. В случае, если несколько элементов содержат одно и то же значение
    tabindex    , их порядок навигации определён относительным расположением в документе (DOM).

Элементы со значением 0, некорректным значением, или элементы с отсутствующим значением tabindex должны быть расположены после элементов с положительным целым числом.

Для более полного объяснения навигации смотри данную статью.

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

Совместимость с браузерами

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка(Да)(Да)(Да)(Да)(Да)
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка(Да)(Да)(Да)(Да)(Да)(Да)

Смотри также

developer.mozilla.org

Атрибут tabindex | HTML | WebReference

Атрибут tabindex устанавливает порядок получения фокуса при переходе между элементами с помощью клавиши Tab. Переход происходит от меньшего значения к большему, например от 1 к 2, затем к 3 и так далее. При этом строгая последовательность не важна, допускается пропускать какие-то числа и начинать с любой цифры. Если значения tabindex у элементов совпадают, тогда учитывается их порядок появления в коде. Заблокированные элементы (у которых установлен атрибут disabled) не участвуют в переходе и фокус не получают.

Значения

Любое целое число.

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

Ноль, неверное значение или когда атрибут tabindex не задан означает, что к элементу можно перейти с помощью клавиатуры, но переход происходит после всех «нумерованных» элементов в том порядке, как они указаны в коде.

Положительное значение определяет порядок элемента в последовательности перехода через клавиатуру: чем больше число, тем больше раз требуется нажать Tab для перехода к элементу.

Максимальное значение не должно превышать 32767.

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

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут tabindex</title>
 </head>
 <body>
  <p>Нажмите кнопку Tab для перехода между элементами</p>
  <p><button>Шестой</button></p>
  <p><button>Седьмой</button></p>
  <p><button tabindex="5">Пятый</button></p>
  <p><button tabindex="1">Первый</button></p>
  <p><button tabindex="3">Третий</button></p>
  <p><button tabindex="2">Второй</button></p>
  <p><button tabindex="4">Четвертый</button></p>
 </body>
</html>

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

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 19.03.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

webref.ru

Атрибут tabindex | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
5.5+2.0+4.0+1.3+1.0+

Описание

Атрибут tabindex устанавливает порядок получения фокуса при переходе между элементами с помощью клавиши Tab. Переход происходит от меньшего значения к большему, например от 1 к 2, затем к 3 и так далее. При этом строгая последовательность не важна, допускается пропускать какие-то числа и начинать с любой цифры. Если значения tabindex у элементов совпадают, тогда учитывается их порядок появления в коде. Заблокированные элементы (у которых установлен атрибут disabled) не участвуют в переходе и фокус не получают.

Переход к элементам, у которых не задан атрибут tabindex или его значение равно 0, происходит после всех «нумерованных» элементов в том порядке, как они указаны в коде.

Синтаксис

tabindex="число"

Значения

Любое целое положительное число.

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

0

Применяется к тегам

<a>, <area>, <button>, <input>, <object>, <select>, <textarea>

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут tabindex</title>
 </head>
 <body>
  <p>Нажмите кнопку Tab для перехода между элементами</p>
  <p><button>Шестой</button></p>
  <p><button>Седьмой</button></p>
  <p><button tabindex="5">Пятый</button></p>
  <p><button tabindex="1">Первый</button></p>
  <p><button tabindex="3">Третий</button></p>
  <p><button tabindex="2">Второй</button></p>
  <p><button tabindex="4">Четвертый</button></p>
 </body>
</html>

htmlbook.ru

Using tabindex  |  Web Fundamentals  |  Google Developers

Web
Language Bahasa Indonesia Deutsch English Español Français Português – Brasil Русский 中文 – 简体 中文 – 繁體 日本語 한국어 Web

developers.google.com

No related posts.