# 焦点focus

*本节讲述web应用中焦点的重要性。你将会知道如何管理焦点，引导别人使用鼠标或者键盘来浏览你的页面。*

在某个页面，你点击了一个链接，然后跳转到网站的主页面。通常这个链接叫做跳转链接或者锚链接。当这个链接被键盘激活时（通常使用*tab*或者*enter*键），它的周围会有一圈焦点圈，表示该元素获得了焦点。

## 一.为什么焦点很重要？

作为一个web开发者，你的职责是让所有人可以浏览（操作）你的网页。css焦点就是为了这个目的而诞生的。

焦点存在的目的，是为了方便那些使用键盘的人浏览页面的。如果一个元素获得了焦点，但是没有任何视觉上的指示表明它获得了焦点，那么使用键盘的人就不会知道此时哪个元素是处于激活状态的（哪个元素获得了焦点），这将会导致导航出错，例如跳转到错误的页面。

## 二.元素是如何获得焦点的？

某些可操作的元素自带获得焦点的属性。例如`<a>`、`<button>`、`<input>`和`<select>`。如果一个元素可以获得焦点，我将之称为**focusable元素**（实在不知道怎么翻译这个名称，翻译成中文可获得焦点的元素，太长了，后面就用**focusable元素**称呼它）。

我们可以用键盘*tab*键，在一个页面的所有focusable元素来回移动，达到导航的作用。

我们还可以通过html的`tabindex`属性，使非focusable元素变成focusable元素，只需要设置`tabindex=0`。
```css
<div tabindex="0">可以获得焦点</div>
```
<iframe height="300" style="width: 100%;" scrolling="no" title="016 Focus_01" src="https://codepen.io/AhCola/embed/wvevawj?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/wvevawj">
  016 Focus_01</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

可以设置tabindex值小于0，将focusable元素变成非focusable元素，例如`tabindex=-1`。
<iframe height="300" style="width: 100%;" scrolling="no" title="016 Focus_02" src="https://codepen.io/AhCola/embed/ZEyEGEd?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/ZEyEGEd">
  016 Focus_02</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

应该**避免将tabindex设置为任何大于0的数**。因为`tabindex`大于0会导致比较奇怪的现象，当页面存在`tabindex`大于0的元素，用户按下tab键，页面中元素获得焦点的顺序首先从**tabindex**大于0的最小的那个元素开始，然后从这个元素开始向下在循环整个页面中的focusable元素。而且我认为我们不应该通过这种方式更改页面focusable元素，获得焦点的顺序，因为页面的阅读方向应该是从上至下的。所以建议大家避免这种错误的使用方式。

## 三.自定义获得焦点时的样式

默认情况下，浏览器会给获得焦点的元素添加一个焦点环，表示某个元素获得了焦点。焦点环的样式，在不同浏览器、不同系统上是不一样的。

我们可以通过css修改焦点环的样式。主要通过`:focus`、`:focus-within`和`:focus-visible`伪类修改。

通过`:focus`和`outline`，可以更改焦点环的样式：
<iframe height="300" style="width: 100%;" scrolling="no" title="016 Focus_03" src="https://codepen.io/AhCola/embed/OJgJVpw?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/OJgJVpw">
  016 Focus_03</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

有时候焦点环，离文字内容太近了，可以通过`outline-offset`属性更改。
<iframe height="300" style="width: 100%;" scrolling="no" title="016 Focus_04" src="https://codepen.io/AhCola/embed/OJgJVgo?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/OJgJVgo">
  016 Focus_04</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>


（完）