jQuery 入門教程：為 IE6 實現表單聚焦樣式兼容方案

問題背景

現代瀏覽器支援 CSS :focus 偽類實現輸入框聚焦樣式，但 IE6 不支援。需用 JavaScript 彌補，jQuery 讓這變得極簡單。

目標效果

<form>
  <dl>
    <dt>Name:</dt> <dd><input type="text" /></dd>
    <dt>Password:</dt> <dd><input type="password" /></dd>
    <dt>Textarea:</dt> <dd><textarea></textarea></dd>
  </dl>
</form>

/* 現代瀏覽器 CSS */
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
    border: 1px solid #f00;
    background: #fcc;
}

jQuery 核心機制

• $()：選擇器引擎，返回 jQuery 對象 (類數組，鏈式調用)
• 鏈式 API：.focus()、.blur()、.css()、.addClass() 等
• 事件名去掉 on 前綴：focus 而非 onfocus

逐步實現

1. 選中目標元素

// 屬性選擇器語法
$("input[type='text'], input[type='password'], textarea")

2. 綁定焦點/失焦事件

$("input[type='text'], input[type='password'], textarea")
    .focus(function() {
        $(this).addClass("focused"); // 或直接 .css({border: '1px solid #f00', background: '#fcc'})
    })
    .blur(function() {
        $(this).removeClass("focused");
    });

3. CSS 定義 .focused 類

.focused {
    border: 1px solid #f00;
    background: #fcc;
}

完整 HTML 頁面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>jQuery Focus Polyfill for IE6</title>
    <style>
        .focused { border: 1px solid #f00; background: #fcc; }
        /* 現代瀏覽器原生支援 */
        input[type="text"]:focus,
        input[type="password"]:focus,
        textarea:focus { border: 1px solid #f00; background: #fcc; }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script>
        $(function() {
            // 僅 IE6 需要，可做瀏覽器判斷或直接綁定 (現代瀏覽器不影響)
            $("input[type='text'], input[type='password'], textarea")
                .focus(function() { $(this).addClass("focused"); })
                .blur(function() { $(this).removeClass("focused"); });
        });
    </script>
</head>
<body>
    <form>
        <dl>
            <dt>Name:</dt> <dd><input type="text" /></dd>
            <dt>Password:</dt> <dd><input type="password" /></dd>
            <dt>Textarea:</dt> <dd><textarea></textarea></dd>
        </dl>
    </form>
</body>
</html>

進階技巧

• 委托事件：動態添加的輸入框用 $(document).on('focus', 'selector', fn)
• 特性檢測：if (!('onfocusin' in document)) 判斷是否需補丁
• 性能優化：緩存選擇器結果、使用 .toggleClass()

jQuery 學習路徑建議

1. 選擇器 (CSS3 + jQuery 擴展)
2. DOM 遍歷、操作、屬性、CSS
3. 事件系統 (綁定、委托、事件對象)
4. 動畫、AJAX、Deferred/Promise
5. 插件機制、源碼閱讀