--- id: 587d7790367417b2b2512ab0 title: Use tabindex to Add Keyboard Focus to an Element challengeType: 0 videoUrl: https://scrimba.com/c/cmzMDHW forumTopicId: 301027 localeTitle: Использование tabindex для добавления фокуса клавиатуры к элементу --- ## Description
tabindex HTML имеет три различные функции, относящиеся к фокусу клавиатуры элемента. Когда он находится в теге, он указывает, что элемент можно сфокусировать. Значение (целое число, положительное, отрицательное или нулевое) определяет поведение. Некоторые элементы, такие как ссылки и элементы управления формами, автоматически получают фокус клавиатуры, когда пользователь переходит через страницу. Он находится в том же порядке, что и элементы, входящие в разметку HTML-источника. Эта же функциональность может быть предоставлена ​​другим элементам, таким как div , span и p , поместив на них tabindex="0" . Вот пример: <div tabindex="0">I need keyboard focus!</div> Примечание.
Отрицательное значение tabindex (обычно -1) указывает, что элемент является настраиваемым, но недоступен клавиатурой. Этот метод обычно используется для программного программирования фокуса на контент (например, когда активируется div для всплывающего окна) и выходит за рамки этих задач.
## Instructions
Camper Cat создал новый опрос для сбора информации о своих пользователях. Он знает, что поля ввода автоматически получают фокус клавиатуры, но он хочет убедиться, что его пользователи клавиатуры приостанавливаются при выполнении инструкций при перемещении элементов. Добавьте атрибут tabindex к тегу p и установите его значение «0». Бонус - использование tabindex также позволяет псевдо-классу CSS :focus работать p тегом p .
## Tests
```yml tests: - text: Your code should add a tabindex attribute to the p tag that holds the form instructions. testString: assert($('p').attr('tabindex')); - text: Your code should set the tabindex attribute on the p tag to a value of 0. testString: assert($('p').attr('tabindex') == '0'); ```
## Challenge Seed
```html

Ninja Survey

Instructions: Fill in ALL your information then click Submit


What level ninja are you?


Select your favorite weapons:




```
## Solution
```html

Ninja Survey

Instructions: Fill in ALL your information then click Submit


What level ninja are you?


Select your favorite weapons:




```