--- id: 587d7790367417b2b2512ab0 title: Use tabindex to Add Keyboard Focus to an Element challengeType: 0 videoUrl: '' 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: Ваш код должен добавить атрибут tabindex к тегу p который содержит инструкции формы. testString: 'assert($("p").attr("tabindex"), "Your code should add a tabindex attribute to the p tag that holds the form instructions.");' - text: Ваш код должен установить атрибут tabindex в теге p равным 0. testString: 'assert($("p").attr("tabindex") == "0", "Your code should set the tabindex attribute on the p tag to a value of 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
```js // solution required ```