HTML5-焦点管理

233jl 发布于2019-05-23 16:23 / 672人阅读

摘要：移动的实质则是切换焦点，所以我们需要去理解什么焦点。元素能够被聚焦的元素，比如接下来我们需要了解一下属性，这个很重要，没有它实现不了焦点管理。

在开发TV web 应用时，发现在交互方式上和传统web开发很不一样。PC上的页面上都是通过鼠标进行交互，而TV则不同，它是通过遥控器按键进行交互，它有点击、移动(上下左右)、返回、主页等操作。
移动的实质则是切换焦点，所以我们需要去理解什么焦点。

focusable元素: 能够被聚焦的元素，比如 button 、 input

接下来我们需要了解一下 tabindex 属性，这个很重要，没有它实现不了焦点管理。

Tab Index

根据 HTML5 规范，属性 tabindex 定义了元素是否可以聚焦。
也就是说如果一个元素声明了 tabindex="0" ，那么这个元素就允许聚焦了。

<div tabindex="0">div>

tabindex 的值有一些规则，我们接下来看一看。
它的值必须是一个整数(Integer)，包括正整数、负整数、0。

负整数

如果该属性值为负整数，浏览器必须允许该元素可被聚焦，但，不能允许它被连续聚焦导航触及。

连续聚焦导航: 通过键盘进行连续导航，比如 tab 键

举个具体例子，在chrome下，给一个 div 设置 tabindex="-1"

<div id="test" tabindex="-1" >div>

如果使用 tab 键进行焦点切换，这个div是选不中的，如果使用 focus 事件，是可以选中的。

document.getElementById("test").focus()

如果该属性值为 0，浏览器必须允许该元素可聚焦，允许该元素可被连续聚焦导航触及，遵循平台(platform)约定去判定该元素的相对顺序。

也就是说不论通过键盘(tab键)，还是 focus 事件，都可以选中元素。

正整数

如果该属性值为正整数，浏览器必须允许该元素可聚焦，允许该元素可被连续聚焦导航触及，应该安排该元素在连续聚焦导航中的顺序

在0和正整数中出现了导航顺序这个概念，那这又是什么呢？

导航顺序

导航顺序，使用tab键进行焦点切换的顺序。
根据HTML5文档来看，假设有一个元素设置了tabindex，且属性值为正整数，那元素排序具体有以下几个规则：

在任何tabindex属性被忽略或对其值解析后返回一个错误的可聚焦元素之前

在任何tabindex属性值小于等于零的可聚焦元素之前

在任何tabindex属性值大于零，小于该元素的tabindex值的元素之后，

在任何tabindex属性值等于该元素的tabindex值且在文档的树顺序(#tree order)中比该元素靠前的元素之后，

在任何tabindex属性值等于该元素的tabindex值且在文档的树顺序(#tree order)中比该元素靠后的元素之前，

在任何tabindex属性值大于该元素的tabindex值的元素之前。

我根据规范在chrome中进行了测试，顺序在chrome中简单来说就是：

导航顺序以从小到大的顺序，正序排列， 0 特殊，始终在最后面。（e.g. [1, 2, 3, 4, 5, 6, ..., 0] ）

负整数不在导航顺序之中

如果属性值一样，那就依据在文档流中的顺序进行排列(0和正整数都适用)

默认的聚焦元素

HTML5规定，有一些元素默认是聚焦元素

具有href属性的a元素

具有href属性的link元素

没有被禁用(#disabled)的button元素

type属性不为隐藏(#Hidden)状态且没有被禁用的input元素

没有被禁用的select元素

没有被禁用的textarea元素

没有disabled属性的command元素

设有draggable属性的元素，如果有可能user agent允许用户使用非指针设备进行拖拽操作的

编辑宿主(#Editing hosts)

浏览上下文容器(#Browsing context containers)

另外，每一个由area元素生成的形状都应该为可聚焦元素。除非平台约定有不同的描述。

我在chrome下测试了几个元素，发现实现和规范还是有一些出入。比如：具有href属性的link元素，不能被聚焦。

焦点使用场景

TV，遥控器操作

无障碍访问网站

表单输入框自动切换

……

其它

对焦点元素的样式控制，使用的是 :focus 选择器。

在chrome控制台中，使用 focus 事件无效，因为不是用户真实的行为，会被浏览器拦截

通过合理的利用默认焦点元素和 tabindex ，就可以实现对web页面的焦点控制。

参考资料

HTML5规范-focus

HTML5规范-聚焦

说说focus/focusin/focusout/blur事件

html-focus.md

HTML4-give focus to an element

why HTML elements can receive focus");

键盘导航的JavaScript组件

关于focus的一些事

云服务器 GPU云服务器 html5管理后台判断焦点切换焦点得到焦点

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/7201.html

DOM 元素中的焦点管理

摘要：元素中的焦点管理焦点元素表单元素或者等以及如何查看当前焦点元素返回当前页面中获得焦点的元素，也就是说，如果此时用户按下了键盘上某个键，会在该元素上触发键盘事件。使用定义的新属性，可以让元素自动获得焦点。 DOM 元素中的焦点管理 1. 焦点元素表单元素（input、select 或者 textarea 等）以及 document.body 2. 如何查看当前焦点元素 documen...

developerworks 2019-08-30 15:55 评论0 收藏0
DOM 元素中的焦点管理

摘要：元素中的焦点管理焦点元素表单元素或者等以及如何查看当前焦点元素返回当前页面中获得焦点的元素，也就是说，如果此时用户按下了键盘上某个键，会在该元素上触发键盘事件。使用定义的新属性，可以让元素自动获得焦点。 DOM 元素中的焦点管理 1. 焦点元素表单元素（input、select 或者 textarea 等）以及 document.body 2. 如何查看当前焦点元素 documen...

alanoddsoff 2019-08-23 15:16 评论0 收藏0
DOM 元素中的焦点管理

摘要：元素中的焦点管理焦点元素表单元素或者等以及如何查看当前焦点元素返回当前页面中获得焦点的元素，也就是说，如果此时用户按下了键盘上某个键，会在该元素上触发键盘事件。使用定义的新属性，可以让元素自动获得焦点。 DOM 元素中的焦点管理 1. 焦点元素表单元素（input、select 或者 textarea 等）以及 document.body 2. 如何查看当前焦点元素 documen...

Drinkey 2019-08-02 14:16 评论0 收藏0
js高级程序设计笔记——DOM扩展

摘要：扩展为了实现更多的功能，会有一些标准或专有的扩展。标准扩展主要有选择符元素遍历一选择符选择符能够允许代码直接根据选择符选择与某个模式匹配的元素。 DOM扩展为了实现更多的功能，会有一些标准或专有的DOM扩展。标准扩展主要有： SelectorAPI（选择符API） HTML5 Element Traversal（元素遍历）一、选择符API 选择符API能够允许J...

ningwang 2019-08-20 19:09 评论0 收藏0