tabindex в CSS - PullRequest
       9

tabindex в CSS

44 голосов
/ 11 февраля 2011

Можно ли управлять tabindex с помощью CSS и, если да, то какие браузеры его поддерживают и какие элементы?

EDIT

Должен сказать, моя цель - поймать события keydown на div. Я видел эту страницу http://www.quirksmode.org/js/events/keys.html#, которая тестирует события клавиатуры, и она показывает, что единственный способ, при котором нажатие клавиши срабатывает на чем-либо, кроме документа и тела или какого-либо элемента формы или ссылки, - это объявление tabindex. Но я читаю на сайте W3C:

Следующие элементы поддерживают Атрибут tabindex: A, AREA, BUTTON, INPUT, OBJECT, SELECT и TEXTAREA.

Так что я немного запутался, что делать, чтобы соответствовать стандартам и заставить мой вариант использования работать?

EDIT2

Весь мой вариант использования - это div с большим количеством контента с искусственной полосой прокрутки. Я могу прокрутить его с помощью событий мыши, но пока не получилось с клавиатурой.

Ответы [ 2 ]

28 голосов
/ 18 июня 2012

Обновление 2017

Как отметил @Wallop в комментариях, свойство nav-index было исключено из спецификации в 2015 году из-за "отсутствия интереса к реализации".


Взгляните на свойство nav-index, представленное W3C в CSS3-UI .

Это свойство в точности соответствует поведению tabindex и применимо к любому элементу.

Свойство nav-index является нейтральным для метода ввода способом указания последовательного порядка навигации (также известного как «порядок табуляции»). Это свойство заменяет атрибут HTML4 / XHTML1 1 tabindex ’

Будучи, вероятно, лучшим совместимым со стандартами решением для данного сценария использования, nav-index до сих пор интерпретируется только Opera (по состоянию на июнь 2012 года) и также помечен W3C как "Элемент под угрозой", поэтому может быть удален время.

Альтернативные кросс-браузерные решения:

  • не соответствует стандартам: установите для атрибута tabindex значение DIV. Это будет работать во всех распространенных браузерах.

  • соответствует стандартам: замените DIV элементом привязки (A) без установленного атрибута href, добавьте стиль display: block и добавьте атрибут tabindex.

Что касается точки BoltClock, я согласен, что порядок табуляции очень логичен (и порядок выбора текста, и порядок табуляции тесно связаны с последовательностью, в которой элементы располагаются в документе). С другой стороны, сегодня CSS имеет более широкое назначение. Он может манипулировать не только содержимым документа (свойство content), но и поведением, когда и если события должны запускаться: то есть с использованием pointer-events, display или z-index изменится порядок событий указателя. Если это очень простые CSS-свойства, почему вы тоже не можете влиять на KeyBoardEvents?

7 голосов
/ 29 ноября 2012

Это немного устарело, но теперь есть опции css, такие как -moz-user-focus.Я уверен, что есть эквивалент Webkit.

https://developer.mozilla.org/en-US/docs/CSS/-moz-user-focus

...