Что такое tabindex в html

Атрибут tabindex

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

Синтаксис

tabindex=""

Значения

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

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

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

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

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

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

Пример

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

Спецификация	Статус
HTML Living Standard	Живой стандарт
HTML 4.01 Specification	Заменённая рекомендация

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

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

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

Браузеры

4

12

1

15

4

1.5

4.4

4

14

3.2

Браузеры

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

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

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

Атрибут tabindex

Атрибут tabindex устанавливает порядок получения фокуса при переходе между элементами с помощью клавиши Tab .

Нажимая эту клавишу можно активировать последовательно некоторые элементы страницы (ссылки и элементы форм). Активные элементы будут получать фокус ввода.

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

Чтобы поменять стили по умолчанию для элемента в фокусе смотрите псевдокласс focus.

Если в момент получения фокуса элемент не был виден на странице (из-за прокрутки), то страница прокрутится к этому элементу.

Если элементам не задан атрибут tabindex или он имеет значение 0 , то переход по ним клавишей Tab будет идти в порядке следования элементов в HTML коде.

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

Значением атрибута служат целые числа от 1 до бесконечности. Если какие-то номера пропущены — ничего страшного не случится (к примеру, если нет номера 2 , то сначала фокус попадет на элемент с tabindex , равным 1 , а потом на элемент с tabindex , равным 3).

Если на странице в момент нажатия клавиши Tab есть элемент в фокусе (фокус мог быть получен не только нажатием Tab , но и кликом мышкой по элементу или атрибутом autofocus ), то следующее нажатие клавиши Tab приведет к тому, что фокус получит следующий по порядку элемент после того, который в фокусе (к примеру, если сейчас в фокусе элемент с tabindex 3 , то следующим получит фокус элемент с tabindex 4).

Если полю ввода задан атрибут disabled , то оно будет проигнорировано переходами через клавишу Tab, даже если этому полю задан атрибут tabindex .

Пример

Давайте инпутам зададим атрибут tabindex . Понажимайте последовательно клавишу Tab и вы увидите, как фокус ввода будет переходить от первого инпута к четвертому, а потом пойдет по ссылкам с начала страницы (так как больше элементов с заданным атрибутом tabindex нет):

Атрибут tabindex

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

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

Синтаксис

tabindex="число"

Значения

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

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

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

Пример

HTML5 IE Cr Op Sa Fx

      
Нажмите кнопку Tab для перехода между элементами
 
Шестой
 
Седьмой
 
Пятый
 
Первый
 
Третий
 
Второй
 
Четвертый
  

Статьи по теме

Что такое tabindex в html

tabindex html

Всем привет! В данной небольшой статье будет рассмотрен атрибут tabindex который через клавишу tab позволяет выбирать ссылку и осуществлять по ней переход. Итак, поехали!

Допустим у нас есть две ссылки с атрибутом tabindex.

Первая ссылка ведет на главную страницу моего блога, а вторая на картинку people.jpg.

У ссылок используется атрибут tabindex с одинаковым значением 0. Отмечу что данный атрибут можем принимать любое целочисленное значение больше или равное нулю. C отрицательными значениями данный атрибут работать не будет.

С помощью данного кода, нажимая клавишу tab мы можем выбирать ссылки в порядке возрастания и shift + tab в порядке убывания. То есть когда вы нажмете клавишу tab у вас в левом нижнем угле отобразиться первая ссылка с атрибутом tabindex(https://webfanat.com), если вы повторно нажмете tab отобразится вторая по порядку ссылка (img/people.jpg). И для того чтобы осуществить переход по выбранной ссылке достаточно будет нажать клавишу Enter.

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

Если посмотреть данный код, то он работает не как мы ожидали. Первая ссылка которая выберется при нажатии клавиши tab все равно будет https://webfanat.com. Однако теперь чтобы перейти к ссылке img/people.jpg нам потребуется сделать шаг назад(shidt+tab) , потому что она имеет более приоритетный порядковый номер 1.

На этом данная статья подошла к концу. Если остались вопросы пишите их в комментариях или группе

А я с вами прощаюсь. Желаю вам успехов и удачи! Пока.

Оцените статью:

Статьи

• transform CSS
• html во весь экран
• GIT Config
• Модальные окна HTML
• vw vh css
• Broadcast Channel
• tabindex html
• python pyperclip
• Python сервер

Комментарии

Внимание. Комментарий теперь перед публикацией проходит модерацию

Все комментарии отправлены на модерацию

© 2017-2023 webfanat.com Все права защищены.

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm

Добавить приложение на рабочий стол