摘要：移動(dòng)的實(shí)質(zhì)則是切換焦點(diǎn)，所以我們需要去理解什么焦點(diǎn)。元素能夠被聚焦的元素，比如接下來我們需要了解一下屬性，這個(gè)很重要，沒有它實(shí)現(xiàn)不了焦點(diǎn)管理。

在開發(fā)TV web 應(yīng)用時(shí)，發(fā)現(xiàn)在交互方式上和傳統(tǒng)web開發(fā)很不一樣。PC上的頁(yè)面上都是通過鼠標(biāo)進(jìn)行交互，而TV則不同，它是通過遙控器按鍵進(jìn)行交互，它有點(diǎn)擊、移動(dòng)(上下左右)、返回、主頁(yè)等操作。
移動(dòng)的實(shí)質(zhì)則是切換焦點(diǎn)，所以我們需要去理解什么焦點(diǎn)。

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

接下來我們需要了解一下 tabindex?屬性，這個(gè)很重要，沒有它實(shí)現(xiàn)不了焦點(diǎn)管理。

根據(jù)?HTML5?規(guī)范，屬性 tabindex?定義了元素是否可以聚焦。
也就是說如果一個(gè)元素聲明了 tabindex="0"? ，那么這個(gè)元素就允許聚焦了。

<div tabindex="0">div>

tabindex?的值有一些規(guī)則，我們接下來看一看。
它的值必須是一個(gè)整數(shù)(Integer)，包括正整數(shù)、負(fù)整數(shù)、0。

如果該屬性值為負(fù)整數(shù)，瀏覽器必須允許該元素可被聚焦，但，不能允許它被連續(xù)聚焦導(dǎo)航觸及。

連續(xù)聚焦導(dǎo)航: 通過鍵盤進(jìn)行連續(xù)導(dǎo)航，比如 tab?鍵

舉個(gè)具體例子，在chrome下，給一個(gè) div?設(shè)置 tabindex="-1"

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

如果使用 tab?鍵進(jìn)行焦點(diǎn)切換，這個(gè)div是選不中的，如果使用 focus?事件，是可以選中的。

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

如果該屬性值為 0，瀏覽器必須允許該元素可聚焦，允許該元素可被連續(xù)聚焦導(dǎo)航觸及，遵循平臺(tái)(platform)約定去判定該元素的相對(duì)順序。

也就是說不論通過鍵盤(tab鍵)，還是 focus?事件，都可以選中元素。

如果該屬性值為正整數(shù)，瀏覽器必須允許該元素可聚焦，允許該元素可被連續(xù)聚焦導(dǎo)航觸及，應(yīng)該安排該元素在連續(xù)聚焦導(dǎo)航中的順序

在0和正整數(shù)中出現(xiàn)了導(dǎo)航順序這個(gè)概念，那這又是什么呢？

導(dǎo)航順序，使用tab鍵進(jìn)行焦點(diǎn)切換的順序。
根據(jù)HTML5文檔來看，假設(shè)有一個(gè)元素設(shè)置了tabindex，且屬性值為正整數(shù)，那元素排序具體有以下幾個(gè)規(guī)則：

在任何tabindex屬性被忽略或?qū)ζ渲到馕龊蠓祷匾粋€(gè)錯(cuò)誤的可聚焦元素之前

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

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

在任何tabindex屬性值等于該元素的tabindex值且在文檔的樹順序(#tree order)中比該元素靠前的元素之后，

在任何tabindex屬性值等于該元素的tabindex值且在文檔的樹順序(#tree order)中比該元素靠后的元素之前，

在任何tabindex屬性值大于該元素的tabindex值的元素之前。

我根據(jù)規(guī)范在chrome中進(jìn)行了測(cè)試，順序在chrome中簡(jiǎn)單來說就是：

導(dǎo)航順序以從小到大的順序，正序排列，?0?特殊，始終在最后面。（e.g. [1, 2, 3, 4, 5, 6, ..., 0]?）

負(fù)整數(shù)不在導(dǎo)航順序之中

如果屬性值一樣，那就依據(jù)在文檔流中的順序進(jìn)行排列(0和正整數(shù)都適用)

HTML5規(guī)定，有一些元素默認(rèn)是聚焦元素

具有href屬性的a元素

具有href屬性的link元素

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

type屬性不為隱藏(#Hidden)狀態(tài)且沒有被禁用的input元素

沒有被禁用的select元素

沒有被禁用的textarea元素

沒有disabled屬性的command元素

設(shè)有draggable屬性的元素，如果有可能user agent允許用戶使用非指針設(shè)備進(jìn)行拖拽操作的

編輯宿主(#Editing hosts)

瀏覽上下文容器(#Browsing context containers)

另外，每一個(gè)由area元素生成的形狀都應(yīng)該為可聚焦元素。除非平臺(tái)約定有不同的描述。

我在chrome下測(cè)試了幾個(gè)元素，發(fā)現(xiàn)實(shí)現(xiàn)和規(guī)范還是有一些出入。比如：具有href屬性的link元素，不能被聚焦。

TV，遙控器操作

無(wú)障礙訪問網(wǎng)站

表單輸入框自動(dòng)切換

……

對(duì)焦點(diǎn)元素的樣式控制，使用的是?:focus?選擇器。

在chrome控制臺(tái)中，使用 focus?事件無(wú)效，因?yàn)椴皇怯脩粽鎸?shí)的行為，會(huì)被瀏覽器攔截

通過合理的利用默認(rèn)焦點(diǎn)元素和 tabindex?，就可以實(shí)現(xiàn)對(duì)web頁(yè)面的焦點(diǎn)控制。

HTML5規(guī)范-focus

HTML5規(guī)范-聚焦

說說focus/focusin/focusout/blur事件

html-focus.md

HTML4-give focus to an element

why HTML elements can receive focus");

鍵盤導(dǎo)航的JavaScript組件

關(guān)于focus的一些事