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

Содержание

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

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

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

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

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

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

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

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

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Базовая поддержка	(Да)	(Да)	(Да)	(Да)	(Да)

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Базовая поддержка	(Да)	(Да)	(Да)	(Да)	(Да)	(Да)

Смотри также

Атрибут 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

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

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

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
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>
Атрибут 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 применяется к тегам a, input, textarea, button, select, area.
Пример
Давайте инпутам зададим атрибут tabindex. Понажимайте последовательно клавишу Tab и вы увидите, как фокус ввода будет переходить от первого инпута к четвертому, а потом пойдет по ссылкам с начала страницы (так как больше элементов с заданным атрибутом
tabindex нет):
<input type="text" tabindex="3" placeholder="Номер элемента: 3"> <input type="text" tabindex="1" placeholder="Номер элемента: 1"> <input type="text" tabindex="2" placeholder="Номер элемента: 2"> <input type="text" tabindex="4" placeholder="Номер элемента: 4">
:
Что такое tabindex= «-1» в bootstrap для
на tabindex атрибут явно определяет порядок навигации для фокусируемых элементов (обычно ссылки и элементы управления формы) на странице. Он также может использоваться для определения того, должны ли элементы быть фокусируемыми или нет.
[оба] tabindex="0" и tabindex="-1" имеют особое значение и обеспечивают отличную функциональность в HTML. Значение 0 указывает, что элемент должен быть размещен в порядке навигации по умолчанию. Это позволяет элементы, которые не являются изначально фокус (например,<div>, <span> и <p>) для получения фокуса клавиатуры. Конечно, обычно для всех интерактивных элементов следует использовать ссылки и элементы управления формами, но это позволяет другим элементам быть фокусируемыми и инициировать взаимодействие.
A tabindex="-1" стоимостью удаляет элемент из потока навигации по умолчанию (т. е. пользователь не может вкладывать в него), но это

позволяет ему получать программный фокус, то есть фокус может быть установлен на него по ссылке или с помощью сценариев.** Это может быть очень полезно для элементов, которые не должны быть вкладками, но которые, возможно, должны иметь фокус установлен на них.
хороший пример —модальное диалоговое окно — при открытии, фокус должен быть установлен в диалоговом окне, так что читатель экрана начнется чтение и клавиатура начнет навигация в диалоговом окне. Потому что диалог (возможно, просто <div> element) по умолчанию не фокусируется, назначение его
tabindex="-1" позволяет установить фокус на него с помощью скриптов, когда он представлен.
значение -1 также может быть полезно в сложных виджетов и меню, используйте клавиши со стрелками или другие сочетания клавиш чтобы убедиться, что только один элемент в виджете доступен для навигации с помощью клавиши tab, но все же позволяет фокусироваться на других компонентах виджета.
вот почему вам нужно tabindex="-1" на режимной <div>, так что пользователи могут получить доступ к общей мыши и сочетания клавиш. Надеюсь, это поможет.
HTML атрибут tabindex | назначение, значения, примеры
Последнее обновление: 03.02.2011
Атрибут tabindex — определяет позицию элемента в порядке табуляции в текущем документе.
Возможные значения: целое число в диапазоне от 0 до 32767.
Элементы, поддерживающие атрибут tabindex, и имеющие для него положительное значение, перебираются в первую очередь.
Элементы, не поддерживающие атрибут tabindex или поддерживающие его и устанавливающие значение «0», считаются текстом. Эти элементы перебираются в порядке, в котором они следуют в потоке символов.
Тип значения NUMBER
Значение по умолчанию Нет
Применим к:
Аналог в CSS нет
Пример
<input tabindex="1" type="text" name="field1">

Твой код:
<html> <head> <title></title> <style type=»text/css»> <!— —> </style> </head> <body> <FORM action=»…» method=»post»> <div> <INPUT tabindex=»1″ type=»text» name=»field1″> <INPUT tabindex=»2″ type=»text» name=»field2″> <INPUT tabindex=»3″ type=»submit» name=»submit»> </div> </FORM> </body> </html>Сделай код и жми тут

Результат:
большой полигон
Заметки
Возможно применение этого атрибута также для следующих тегов:
abbr, acronym, address, applet, b, bdo, big, blink, blockquote, body, br, caption, center, cite, code, dd, del, dfn, dir, div, dl, dt, em, embed, fieldset, font, form, frame, frameset, h2-h6, hr, html, i, iframe, img, ins, isindex, kbd, keygen, label, legend, li, listing, map, marquee, menu, nobr, noframes,ol, optgroup, option, p, plaintext, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var, wbr, xmp.
Такое применение не соответствует спецификации HTML 4.01, но поддерживается Internet Explorer, Firefox, Opera, Chrome и не поддерживается Safari.
По теме
seodon.ru | Общие атрибуты HTML
Опубликовано: 25.06.2010 Последняя правка: 10.12.2015
Атрибут tabindex устанавливает порядок, в котором будет идти перечисление элементов при табуляции (клавиша Tab). То есть данный атрибут отвечает за навигацию по HTML-странице с помощью клавиатуры.
Чаще всего атрибут tabindex используют для упорядочивания перебора между элементами форм (тег <FORM>) или ссылками меню сайта (тег <A>). При этом хотел бы обратить ваше внимание на то, что некоторые браузеры (в зависимости от настроек) могут визуально никак не выделять некоторые типы элементов при табуляции, хотя перебор при этом вести. Например, этими особенностями обладает браузер Opera.
Атрибут tabindex появился в HTML довольно давно, но раньше он поддерживался ограниченным количеством тегов, а теперь он есть у всех. Поэтому, если на страницах описания каких-то тегов вы увидите логотип HTML 5 () напротив атрибута, то знайте, что этот тег начал поддерживать данный атрибут именно с версии HTML 5. C другой стороны, хоть в HTML 5 теперь все теги могут иметь этот атрибут — не факт, что браузеры его будут также понимать во всех случаях. Более того, в описаниях W3C также нет конкретики по данному вопросу, например о том, для чего использовать атрибут tabindex в параграфах (тег <P>).
Значения
Значением атрибута tabindex является число от 0 до 32767. Перебор во время табуляции идет в порядке возрастания. Если у двух тегов одинаковые значения tabindex, то перебор идет в порядке появления их в HTML-коде страницы (сверху вниз, слева направо).
Значение по умолчанию: нет.
Если вы хотите сделать так, чтобы какой-либо HTML-элемент вообще был исключен и не выбирался при табуляции, то можете попробовать установить для него отрицательное значение tabindex. Но имейте в виду, что отрицательные значения данного атрибута не предусмотрены спецификацией HTML.
Синтаксис
<button tabindex="значение">...</button> <area tabindex="значение" alt="текст"> <a href="URL" tabindex="значение">...</a>
Обязательный атрибут: нет.
Пример HTML: применение атрибута tabindex для тега A
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>seodon.ru - Тег A, атрибут tabindex</title> </head> <body> <p><a href="files/hello.html" tabindex="1">Ссылка-1</a> <a href="files/hello.html" tabindex="2">Ссылка-2</a></p> <p><a href="files/hello.html" tabindex="4">Ссылка-4</a> <a href="files/hello.html" tabindex="3">Ссылка-3</a></p> </body> </html>
Результат примера
Пример HTML: применение атрибута tabindex для тега AREA
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>seodon.ru - Тег AREA, атрибут tabindex</title> </head> <body> <p><img src="images/wild.png" usemap="#header" alt="Салон красоты Wild kitties"> <map name="header"> <area href="files/home.html" shape="poly" tabindex="1" coords="19,71,104,71,109,85,104,98,19,98,11,85" alt="Главная"> <area href="files/novosti.html" shape="poly" tabindex="3" coords="126,71,211,71,216,85,211,98,126,98,118,85" alt="Новости"> <area href="files/uslugi.html" shape="poly" tabindex="2" coords="233,71,318,71,323,85,318,98,233,98,225,85" alt="Услуги"> <area href="files/o_nas.html" shape="poly" tabindex="4" coords="339,71,424,71,429,85,424,98,339,98,331,85" alt="О нас"> </map></p> </body> </html>
Результат примера
Поддержка версиями HTML
Версия: HTML 4.01 HTML 5 XHTML 1.0 XHTML 1.1
Поддержка: Да Да Да Да
Поддержка браузерами
Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Да Да Да Да Да
tabindex — Веб-технологии для разработчиков
Максимальное значение для tabindex не должно превышать 32767 (W3C 17.11.1)
Глобальный атрибут tabindex — целое число, определяющее ли данный элемент участвовать в последовательной навигации по всей странице с помощью клавиатуры, в каком порядке. Содержит одно из нескольких видов значений:
если присутствует отрицательное значение — элемент может быть выделен, однако не участвует в последовательной навигации;
представлен 0 — элемент может быть выделен и достигнут с помощью последовательной навигации, порядок навигации платформыой;
если представлено положительное целое значение — элемент будет достигнут (и выделен) с помощью последовательной навигации, а порядок навигации определенным этим самым значением.В случае если несколько элементов содержат одно и то же значение tabindex , их порядок навигации определенным расположением в документе (DOM).
Элементы со значением 0, некорректным значением, или элементы с отсутствующим значением tabindex должны быть защищены после элементов с положительным целым числом.
Для более полного объяснения навигации смотри эту статью.
Спецификации
Совместимость с браузерами
Элемент Хром Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка (Да) (Да) (Да) (Да) (Да)
Элемент Android Chrome для Android Firefox Mobile (Gecko) IE мобильный Opera Mobile Safari Mobile
Базовая поддержка (Да) (Да) (Да) (Да) (Да) (Да)
Смотри также
.
Атрибут tabindex | HTML | WebReference
Атрибут tabindex устанавливает порядок получения фокуса при переходе между элементами с помощью клавиш Tab . Переход происходит от меньшего значения к большему, например от 1 к 2, затем к 3 и так далее. При этом строгая последовательность не важна, пропускать какие-то числа и начинать с любых цифр. Если значения tabindex у совпадают, тогда учитывается их порядок появления в коде. Заблокированные элементы (у которых установленные атрибуты инвалиды) не участвуют в переходе и фокус не получают.
Значения
Любое целое число.
Отрицательное значение фокусировки, что элемент может получить, но к нему нельзя перейти с помощью клавиатуры.
Ноль, неверное значение или когда атрибут tabindex не задан означает, что к элементу можно перейти с помощью клавиатуры, но после всех «нумерованных» элементов в порядке, как они указаны в переходе, коде.
Положительное значение определяет порядок элемента в переходе через клавиатуру: чем больше число, тем больше требуется нажим Вкладка для перехода к элементу.
Максимальное значение не должно быть 32767.
Значение по умолчанию
Пример
Атрибут tabindex
Нажмите кнопку Tab для перехода между элементами

Спецификация
Каждая спецификация проходит несколько стадий одобрения.
Рекомендация (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Кандидат в рекомендацию (отвечающая за стандарт, удовлетворена) группа разработчиков, соответствующая своим целям, но требуется помощь сообщества разработчиков по реализации стандартов.
Предлагаемая рекомендация (Предлагаемая рекомендация) — на этом этапе представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Рабочий проект (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Черновик редакции (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Черновик (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
Браузеры
В таблице браузеров используются следующие обозначения.
— элемент полностью поддерживаемый браузером;
— элемент браузером не воспринимается и игнорируется;
— при возможном появлении различных ошибок, либо элемент связанных с условиями.
Число указывает браузреа, начиная с которой устанавливается элемент.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 19.03.2018
Редакторы: Влад Мержевич
.
Атрибут tabindex | htmlbook.ru
Internet Explorer Хром Opera Safari Firefox Android iOS
5.5+ 2.0+ 4.0+ 1.3+ 1.0+
Описание
Атрибут tabindex устанавливает порядок установки фокуса перехода между элементами с помощью клавиш Tab.Переход происходит от меньшего значения к большему, например от 1 к 2, затем к 3 и так далее. При этом строгая последовательность не важна, пропускать какие-то числа и начинать с любых цифр. Если значения tabindex у совпадают, тогда учитывается их порядок появления в коде. Заблокированные элементы (у которых установленные атрибуты инвалиды) не участвуют в переходе и фокус не получают.
Переход к элементам, у которых не задан атрибут tabindex или его значение равно 0, происходит после всех «нумерованных» элементов в том, как они указаны в коде.
Синтаксис
tabindex = "число"
Значения
Любое целое положительное число.
Значение по умолчанию
0
Применяется к тегам
,,

Тип значения	NUMBER
Значение по умолчанию	Нет
Применим к:
Аналог в CSS	нет

Версия:	HTML 4.01	HTML 5	XHTML 1.0	XHTML 1.1
Поддержка:	Да	Да	Да	Да

Браузер:	Internet Explorer	Google Chrome	Mozilla Firefox	Opera	Safari
Версия:	6.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Да	Да	Да	Да	Да

Internet Explorer	Хром	Opera	Safari	Firefox	Android	iOS
5.5+	2.0+	4.0+	1.3+	1.0+