溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

站長深惡痛絕的onfocus=”this.blur()”是什么

發(fā)布時(shí)間：2021-10-14 14:16:16 來源：億速云 閱讀：141 作者：小新 欄目：移動(dòng)開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)站長深惡痛絕的onfocus=”this.blur()”是什么，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

在談到讀屏軟件操作頁面時(shí)，他對(duì)我們前端的同學(xué)特別的強(qiáng)調(diào)：他最深惡痛絕的就是頁面鏈接上有 onfocus=”this.blur()” 這句代碼，這從何說起呢？

站長深惡痛絕的onfocus=”this.blur()”是什么

(圖一)

各位同學(xué)，看到這句代碼有沒有覺得眼熟，對(duì)的，你懂的，我們常用它來去除鏈接取得焦點(diǎn)時(shí)外圍出現(xiàn)的虛線框（如上圖一），google一下，前面幾十頁談的都是這個(gè)去除虛線框的技巧。但我們也許以前從未想過：我們的這行代碼給盲人用戶們帶來了巨大的困擾：這中斷了盲人用戶的Tab鍵路徑，導(dǎo)致Tab光標(biāo)無法聚焦頁面的下一個(gè)控制器（鏈接、表單域、object、image map等）。測(cè)試如下：

代碼如下:


<body>
<a href="#" >第一個(gè)鏈接</a>
<a href="#" >第二個(gè)鏈接</a>
<a href="#" onfocus="this.blur();">第三個(gè)鏈接</a>
<a href="#" >第四個(gè)鏈接</a>
<a href="#" >第五個(gè)鏈接</a>
<a href="#" >第六個(gè)鏈接</a>
</body>

按下Tab鍵，第一和第二個(gè)鏈接都可以正常獲取焦點(diǎn)，繼續(xù)Tab到第三個(gè)鏈接時(shí)，悲劇出現(xiàn)了：此時(shí)焦點(diǎn)會(huì)回到第一個(gè)鏈接，而無法Focus到第四個(gè)鏈接，原因是當(dāng)Focus到第三個(gè)鏈接時(shí)，onfocus=”this.blur()” 事件處理強(qiáng)制觸發(fā)了失焦，焦點(diǎn)重新回到文檔的最開始。于是不停按Tab的結(jié)果就是焦點(diǎn)在前面三個(gè)鏈接輪流轉(zhuǎn)，后面的內(nèi)容通過Tab鍵無法訪問[1]。

站長深惡痛絕的onfocus=”this.blur()”是什么 （圖二）

那么，有更好的方式嗎？從根源上看，加onfocus=”this.blur()”是為了去除鏈接獲取焦點(diǎn)后外圍的虛線框（當(dāng)然chrome、safari、opera下的focus效果各異，這里姑且就這么叫吧 ）。W3C關(guān)于Outline的文章里說明這個(gè)虛線框用來告訴用戶當(dāng)前頁面獲取焦點(diǎn)的元素。我覺得，虛線框的存在有它的合理性，但有時(shí)你也許無法回避某些”視覺潔癖”需求（如圖二：虛線框使“商品”背景和下面的紅色色塊分隔開了），以下總結(jié)了去掉虛線框的幾種常用方法：

去除虛線框的方法優(yōu)劣兼容性是否中斷tab
<a href=”#” onfocus=”this.blur()”>this blur</a>鏈接聚焦觸發(fā)時(shí)失去焦點(diǎn)，js和html耦合在一起沒有兼容性問題是
a:focus {outline:none}或
a{outline:none}		outline由css2.1引入，去除虛線框視覺上的問題正是css的職責(zé)ie6/ie7不支持,ie8+/ff /safari/opera[2]支持否
<a href=”#” hidefocus=”true” >hidefocus</a>該屬性是ie的私有屬性[3]ie5+支持否
a { noFocusLine: expression(this.onFocus = this.blur())}可批量處理，但expression的性能問題不能忽視expression ie6/7支持，ie8+、非ie不支持是

綜合以上，去除鏈接虛線框的推薦方法是：ie下用hidefocus屬性，ff/chorme/opera/safari下用outline:none。即:
<a href="#" hidefocus="true" >鏈接</a>
a:focus {
outline:none;
}

同學(xué)無奈地說，如果頁面因?yàn)閛nfocus="this.blur()"導(dǎo)致tab無法訪問頁面全部內(nèi)容，爭渡讀屏軟件在讀取頁面之前會(huì)強(qiáng)制過濾掉這個(gè)屬性，但是如果用戶是在js里面動(dòng)態(tài)觸發(fā)this.blur(),讀屏軟件又要出新招來克制了。這無疑增加了讀屏軟件的開發(fā)工作量，為了讓盲人用戶們能更順暢的訪問我們的網(wǎng)站，盡量避免使用onfocus="this.blur()"哦。

注釋

[1]Safari默認(rèn)情況下，按tab鍵是不會(huì)focus鏈接的，但會(huì)focus表單域，在偏好設(shè)置-高級(jí)勾選“按下tab以高亮顯示網(wǎng)頁上的每一項(xiàng)”可開啟該功能。Opera比較特殊，它通過shift+上下左右方向鍵可以向上下左右focus頁面焦點(diǎn)。

[2]在Opera下點(diǎn)擊鏈接（focus和active狀態(tài)）時(shí)都不會(huì)出現(xiàn)所謂的虛線框，所以 Opera下鏈接的虛線框問題可以不計(jì)。 Opera 通過shift+上下左右鍵產(chǎn)生的線框通過outline:none并不能去除，但是Opera支持outline這個(gè)屬性。

[3]hidefocus屬性是ie的私有屬性，雖然hidefocus屬性有true or false兩個(gè)值，但測(cè)試結(jié)果是ie5-ie9不管其值為true or false, 只要添加hidefocus屬性，該鏈接都會(huì)失去虛線框。

關(guān)于“站長深惡痛絕的onfocus=”this.blur()”是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手