You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
4.5 KiB
60 lines
4.5 KiB
3 years ago
|
# 焦点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>
|
||
|
|
|
||
|
|
|
||
|
|
（完）
|