Использование tabindex для добавления фокуса клавиатуры к элементу
tabindex HTML имеет три различные функции, относящиеся к фокусу клавиатуры элемента. Когда он находится в теге, он указывает, что элемент можно сфокусировать. Значение (целое число, положительное, отрицательное или нулевое) определяет поведение. Некоторые элементы, такие как ссылки и элементы управления формами, автоматически получают фокус клавиатуры, когда пользователь переходит через страницу. Он находится в том же порядке, что и элементы, входящие в разметку HTML-источника. Эта же функциональность может быть предоставлена другим элементам, таким как div , span и p , поместив на них tabindex="0" . Вот пример: <div tabindex="0">I need keyboard focus!</div> Примечание.
Отрицательное значение tabindex (обычно -1) указывает, что элемент является настраиваемым, но недоступен клавиатурой. Этот метод обычно используется для программного программирования фокуса на контент (например, когда активируется div для всплывающего окна) и выходит за рамки этих задач.
Camper Cat создал новый опрос для сбора информации о своих пользователях. Он знает, что поля ввода автоматически получают фокус клавиатуры, но он хочет убедиться, что его пользователи клавиатуры приостанавливаются при выполнении инструкций при перемещении элементов. Добавьте атрибут tabindex к тегу p и установите его значение «0». Бонус - использование tabindex также позволяет псевдо-классу CSS :focus работать p тегом p .