国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

HTML5-焦點管理

233jl / 703人閱讀

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

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

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

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

Tab Index

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

<div tabindex="0">div>

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

負整數(shù)

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

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

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

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

如果使用 tab?鍵進行焦點切換，這個div是選不中的，如果使用 focus?事件，是可以選中的。

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

0

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

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

正整數(shù)

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

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

導(dǎo)航順序

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

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

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

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

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

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

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

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

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

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

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

默認的聚焦元素

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

具有href屬性的a元素

具有href屬性的link元素

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

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

沒有被禁用的select元素

沒有被禁用的textarea元素

沒有disabled屬性的command元素

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

編輯宿主(#Editing hosts)

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

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

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

焦點使用場景

TV，遙控器操作

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

表單輸入框自動切換

……

其它

對焦點元素的樣式控制，使用的是?:focus?選擇器。

在chrome控制臺中，使用 focus?事件無效，因為不是用戶真實的行為，會被瀏覽器攔截

通過合理的利用默認焦點元素和 tabindex?，就可以實現(xiàn)對web頁面的焦點控制。

參考資料

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的一些事

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/7201.html

相關(guān)文章

  • DOM 元素中的焦點管理

    摘要：元素中的焦點管理焦點元素表單元素或者等以及如何查看當(dāng)前焦點元素返回當(dāng)前頁面中獲得焦點的元素，也就是說，如果此時用戶按下了鍵盤上某個鍵，會在該元素上觸發(fā)鍵盤事件。使用定義的新屬性，可以讓元素自動獲得焦點。 DOM 元素中的焦點管理 1. 焦點元素 表單元素（input、select 或者 textarea 等） 以及 document.body 2. 如何查看當(dāng)前焦點元素 documen...

    developerworks 評論0 收藏0

  • DOM 元素中的焦點管理

    摘要：元素中的焦點管理焦點元素表單元素或者等以及如何查看當(dāng)前焦點元素返回當(dāng)前頁面中獲得焦點的元素，也就是說，如果此時用戶按下了鍵盤上某個鍵，會在該元素上觸發(fā)鍵盤事件。使用定義的新屬性，可以讓元素自動獲得焦點。 DOM 元素中的焦點管理 1. 焦點元素 表單元素（input、select 或者 textarea 等） 以及 document.body 2. 如何查看當(dāng)前焦點元素 documen...

    alanoddsoff 評論0 收藏0

  • DOM 元素中的焦點管理

    摘要：元素中的焦點管理焦點元素表單元素或者等以及如何查看當(dāng)前焦點元素返回當(dāng)前頁面中獲得焦點的元素，也就是說，如果此時用戶按下了鍵盤上某個鍵，會在該元素上觸發(fā)鍵盤事件。使用定義的新屬性，可以讓元素自動獲得焦點。 DOM 元素中的焦點管理 1. 焦點元素 表單元素（input、select 或者 textarea 等） 以及 document.body 2. 如何查看當(dāng)前焦點元素 documen...

    Drinkey 評論0 收藏0

  • js高級程序設(shè)計筆記——DOM擴展

    摘要：擴展為了實現(xiàn)更多的功能，會有一些標(biāo)準(zhǔn)或?qū)Ｓ械臄U展。標(biāo)準(zhǔn)擴展主要有選擇符元素遍歷一選擇符選擇符能夠允許代碼直接根據(jù)選擇符選擇與某個模式匹配的元素。 DOM擴展 為了實現(xiàn)更多的功能，會有一些標(biāo)準(zhǔn)或?qū)Ｓ械腄OM擴展。 標(biāo)準(zhǔn)擴展主要有： SelectorAPI（選擇符API） HTML5 Element Traversal（元素遍歷） 一、 選擇符API 選擇符API能夠允許J...

    ningwang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<