--- id: 587d7790367417b2b2512ab0 title: Use tabindex to Add Keyboard Focus to an Element challengeType: 0 videoUrl: '' localeTitle: 使用tabindex将键盘焦点添加到元素 --- ## Description
HTML tabindex属性有三个与元素键盘焦点相关的不同功能。当它在标签上时，它表示可以关注元素。值（一个正数，负数或零的整数）决定了行为。当用户在页面中进行选项卡时，某些元素（如链接和表单控件）会自动接收键盘焦点。它与HTML源标记中的元素的顺序相同。通过在其上放置tabindex="0"属性，可以将相同的功能赋予其他元素，例如div ， span和p 。这是一个例子： <div tabindex="0">I need keyboard focus!</div> 注意
负tabindex值（通常为-1）表示元素是可聚焦的，但键盘无法访问。此方法通常用于以编程方式将焦点集中到内容上（例如，当激活用于弹出窗口的div时），并且超出了这些挑战的范围。
## Instructions
Camper Cat创建了一项新调查，以收集有关其用户的信息。他知道输入字段会自动获得键盘焦点，但他希望确保键盘用户在指示项目时暂停指示。将tabindex属性添加到p标记并将其值设置为“0”。奖金 - 使用tabindex还可以使CSS伪类:focus在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: 您的代码应将p标记上的tabindex属性设置为值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 ```