王鹏飞

Blog

Tutorial

About

CSS

2021年8月23日

焦点focus

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

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

一.为什么焦点很重要?

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

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

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

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

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

我们还可以通过html的tabindex属性,使非focusable元素变成focusable元素,只需要设置tabindex=0

<div tabindex="0">可以获得焦点</div>

可以设置tabindex值小于0,将focusable元素变成非focusable元素,例如tabindex=-1

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

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

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

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

通过:focusoutline,可以更改焦点环的样式:

有时候焦点环,离文字内容太近了,可以通过outline-offset属性更改。

附:参考资料

(完)

留言(0


发表评论

邮箱地址不会被公开。*表示必填项