移除連結 Focus 時所產生的虛線

此篇文章最近更新時間為2011-01-02 20:24:56 目前共有8篇留言

關於作者 - JosephJ

任職於 Faria。喜好戶外運動、2008 年 5 月完成「跑步環島」。對於新技術跟程式碼有著強烈的偏執狂。

Snap4

所有瀏覽器在連結或表單元素的 :focus 時都會產生虛線,這種虛線的主要用途是:可方便使用 Tab 鍵前後移動、並得知目前所在的位置。這是 Web Accessiblity 很重要的一個小功能,也因此我極度並不贊同將此虛線移除。But .... 有時在產品設計上還是得妥協,他的確會帶來一些美觀上的問題 :(

會想發表這篇文章的原因是:雖然曾經讓每個瀏覽器都 Work,但現在想要用卻遍尋不著 IE < 8 的解法 :p (只能說年紀大了,很多事還是寫下來比較好 XD )另外就是用 Google 爬文的解法都怪怪的,像是得用 JavaScript 綁 focus 事件並 document.body.focus() ? 記得當初做沒有這麼複雜啊!而且上述作法會對視障朋友產生極大困擾(完全沒辦法用鍵盤操作了),真的應該禁止使用。

在大多數的標準瀏覽器,只要在 CSS 設定一下 outline 的屬性即可:
a, input {outline: 0}
針對在老舊的 IE 只要在 HTML 多加一個 hideFocus 屬性即可:
<a href="#" hideFocus="false"/>

就這麼簡單囉,想不起來的原因是... 之前都一直跟 hasFocus() 搞混 :p 發表了這篇,以後應該不會再忘記了。


Comments

  1. Jace 2011-12-01 12:40:20
    还是尽量争取不要去掉虚线,键盘用户找不到焦点位置了。
  2. 佳佳 2011-04-07 10:37:19
    謝啦

    同意
    blog是寫给自己看的。哈哈
    我也是!!!!!
  3. 裕波 2011-01-24 16:30:03
    是的,记录一下,总是好的
    blog是写给自己看的。哈哈
  4. Jackson 2011-01-18 12:29:31
    今天看一篇blog,有人总结了一下,值得一看,http://sofish.de/1366
  5. Jackson 2011-01-13 09:11:19
    嘿嘿,这个我早知道了。:)我也不赞成去掉。。
  6. 大勝 2011-01-04 18:27:50
    納入筆記中 (寫)
  7. niles tang 2011-01-03 20:36:00
    很棒的一个解法,之前都是使用js把所有的a找出,然后在click事件的callback里写上$(this).blur(),相当别扭,很不专业
  8. 虎哥 2011-01-03 10:02:29
    不會再忘記了=b
暱稱: 必填。
Email: 非必填。若填寫為不公開欄位,僅供站長參考聯繫。
內容: 必填。限 255 個字元以內。
驗證碼:
送出

Facebook Comment