CSS/JS/jQuery 三大技術去除連結聚焦虛線框完整方案與相容性分析

連結 (<a>) 與表單元素獲得焦點時，瀏覽器預設繪製的虛線外框 (focus outline) 雖具無障礙功能，但常與視覺設計衝突。本文系統整理 CSS、原生 JavaScript、jQuery 三大技術路線的解決方案，深度分析瀏覽器相容性、無障礙影響與最佳實踐策略。

方案一：CSS 偽類選擇器 (現代首選)

基礎寫法

/* 標準語法：移除 outline */
a:focus,
input:focus,
button:focus,
select:focus,
textarea:focus {
    outline: none;
}

Firefox 專屬前綴 (歷史遺留)

/* Firefox 舊版支援 -moz-outline (現代版已標準化) */
a:focus {
    outline: none;
    -moz-outline-style: none;  /* Firefox 1.5-3.0 */
}

:focus-visible 現代最佳實踐 (推薦)

/* 僅在鍵盤導航時顯示焦點，滑鼠點擊不顯示 */
a:focus:not(:focus-visible) {
    outline: none;
}

a:focus-visible {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

/* 表單元素同理 */
input:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}

優勢：完美平衡視覺設計與鍵盤無障礙需求。支援：Chrome 86+、Firefox 85+、Edge 86+、Safari 15.4+。

相容性表

方案二：原生 JavaScript 行為控制

內聯 onfocus (簡單但不推薦)

<a href="#" onfocus="this.blur()">連結</a>

缺點：HTML 與行為耦合、破壞鍵盤導航 (Tab 鍵無法停留)、違反 CSP 原則。

統一事件委派 (推薦)

// 頁面載入後執行
document.addEventListener('DOMContentLoaded', function() {
    // 針對所有連結與按鈕
    document.addEventListener('focus', function(e) {
        if (e.target.matches('a, button, input, select, textarea')) {
            // 方案 A：立即模糊 (破壞無障礙)
            // e.target.blur();
            
            // 方案 B：僅移除視覺 outline (需配合 CSS)
            e.target.style.outline = 'none';
        }
    }, true); // 捕獲階段
});

HTC 行為檔案 (僅 IE 5.5-10)

/* css/focus.htc */
<public:attach event="onfocus" onevent="element.blur()" />

/* CSS 引用 */
a, input, button {
    behavior: url(/css/focus.htc);
}

已淘汰：IE 11 移除 HTC 支援，現代專案勿用。

方案三：jQuery 封裝方案

基礎版：排除文字輸入框

$(document).ready(function() {
    // 排除文字類輸入框 (保留編輯焦點視覺)
    $('a, button, input:not([type="text"], [type="password"], [type="email"], [type="search"], [type="url"])')
        .on('focus', function() {
            this.blur();  // 立即失焦
        });
});

進階版：配合 :focus-visible Polyfill

// 載入 focus-visible polyfill 後
$(function() {
    // 為不支援 :focus-visible 的瀏覽器提供 fallback
    if (!('focusVisible' in document.documentElement.dataset)) {
        $('a, button').on('mousedown', function() {
            $(this).addClass('mouse-focus');
        }).on('blur', function() {
            $(this).removeClass('mouse-focus');
        });
    }
});

/* CSS 配合 */
a.mouse-focus,
button.mouse-focus {
    outline: none;
}

無障礙 (a11y) 關鍵考量

無障礙友善焦點樣式範例

/* 符合品牌設計的焦點指示器 */
:focus-visible {
    outline: none;  /* 重置預設 */
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #0066cc;  /* 雙層陰影適配深淺背景 */
    border-radius: 2px;
}

/* 按鈕專屬 */
button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible {
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #0066cc, 0 2px 8px rgba(0,0,0,0.15);
}

綜合決策指南

專案需求分析
├─ 現代瀏覽器為主 (不支援 IE)
│   └─ → 直接使用 :focus-visible + 自訂焦點樣式 ✅
│
├─ 需支援 IE 11
│   ├─ 可接受 Polyfill 體積
│   │   └─ → 引入 focus-visible polyfill + :focus-visible 寫法 ✅
│   └─ 無法使用 Polyfill
│       └─ → outline: none + :focus { outline: auto } (IE 忽略 :focus-visible) ⚠️
│
├─ 必須移除所有焦點樣式 (極少數情況)
│   └─ → outline: none + 確保替代導航機制 (如鍵盤快捷鍵、語音控制) ⚠️
│
└─ 歷史專案快速修復
    └─ → a:focus { outline: none } + 記錄技術債、排期重構 📝

總結

• 現代標準：:focus-visible 是解決「視覺乾淨」與「鍵盤可見」衝突的標準答案
• 漸進增強：搭配 Polyfill 支援舊版瀏覽器，核心 CSS 不變
• 拒絕 blur()：破壞鍵盤導航，違反 WCAG 2.1.1
• 拒絕無替代 outline: none：違反 WCAG 2.4.7
• 設計系統整合：將焦點樣式納入 Design Tokens，統一品牌視覺語言

採用 :focus-visible 為核心、自訂焦點樣式為表現層、Polyfill 為相容層的三層架構，是目前最專業、最符合無障礙法規、最易維護的解決方案。