Навигация с помощью клавиатуры

Часто Web-приложения используют Javascript для того, чтобы подражать обычным программам и использовать элементы управления, такие как деревья, закладки и т.п. Важную часть взаимодействия пользователя и интерфейса при таком подражании составляет навигация по элементам управления с помощью клавиатуры.

Любой элемент в документе может получить фокус, если у него указан атрибут tabindex . Он не является частью спецификации HTML 4.01, но фактически реализован во всех современных браузерах.

Значение атрибута tabindex

Атрибут может принимать любые числовые значения. Явное указание атрибута позволяет получить фокус с помощью указателя мыши или программно через метод focus(). Отсутствие атрибута устанавливает обычную реакцию элемента. В этом случае фокус могут получить только элементы формы, ссылки и некоторые другие.

Поведение при навигации с помощью клавиши «Tab»

  • Отрицательное

    Элемент игнорируется

  • Нулевое

    Последовательность задается положением элемента в документе

  • Положительное

    Значение явно задает порядок элементов при перемещении фокуса

Отслеживание сфокусированного элемента

События focus и blur могут быть использованы для любого элемента. Но так как нет стандартного интерфейса, для определения получил элемент фокус или нет, то нужно будет самостоятельно обрабатывать и запоминать это состояние.

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

Динамическое изменение атрибута tabIndex

Изменение атрибута может использоваться в случае, когда элемент управления может отключаться, и его следует пропускать при перемещении между элементам.

Отслеживание фокуса у элемента document

Что касается событий focus и blur , то их может генерировать не только конкретный элемент, но и весь документ в целом. В jQuery 1.4 разработчики добавили синтетические события focusin и focusout для корректной делегации родительским элементам DOM-событий focus и blur соответственно. Прикрепив обработчик этих событий к документу, можно отслеживать активность окна браузера.