一、什麼是focus()方法？

focus()是jQuery中處理元素獲得焦點的事件方法。當用户通過鼠標點擊或通過tab鍵定位到表單元素（如輸入框、下拉框等）時，就會觸發focus事件。

簡單説：當你點擊輸入框或按tab鍵切換到輸入框時，就是"獲得焦點"，這時候就可以用focus()方法做些事情啦！

二、focus()方法的語法

1. 觸發focus事件（讓元素自動獲得焦點）

$(selector).focus();

2. 綁定函數到focus事件（當元素獲得焦點時執行的代碼）

$(selector).focus(function() {
  // 這裏寫你的代碼
});

三、超實用的代碼示例

1. 基礎用法：輸入框獲得焦點時改變樣式

<input type="text" id="username" placeholder="請輸入用户名">
<script>
  // 當輸入框獲得焦點時，改變邊框顏色
  $("#username").focus(function() {
    $(this).css("border-color", "blue");
    $(this).css("background-color", "#f0f8ff");
  });
  
  // 當輸入框失去焦點時，恢復樣式
  $("#username").blur(function() {
    $(this).css("border-color", "#ccc");
    $(this).css("background-color", "#fff");
  });
</script>

2. 表單驗證：輸入框獲得焦點時提示

<label for="email">郵箱：</label>
<input type="text" id="email" placeholder="請輸入郵箱">
<div id="emailTip"></div>
<script>
  $(document).ready(function() {
    $("#email").focus(function() {
      $("#emailTip").text("請輸入您的郵箱地址，例如：user@example.com");
    }).blur(function() {
      // 驗證郵箱格式
      if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test($(this).val())) {
        $("#emailTip").text("郵箱格式不正確，請重新輸入");
      } else {
        $("#emailTip").text("");
      }
    });
  });
</script>

3. 搜索框自動提示：獲得焦點時顯示關鍵詞

<input type="text" id="search" placeholder="搜索商品...">
<div id="searchSuggest"></div>
<script>
  $(document).ready(function() {
    $("#search").focus(function() {
      $("#searchSuggest").html(
        "<ul><li>手機</li><li>電腦</li><li>耳機</li><li>智能手錶</li></ul>"
      );
    }).blur(function() {
      $("#searchSuggest").html("");
    });
  });
</script>

4. 頁面加載後自動聚焦到指定輸入框

<input type="text" id="searchInput" placeholder="搜索內容...">
<script>
  $(document).ready(function() {
    // 頁面加載後，自動聚焦到搜索框
    $("#searchInput").focus();
  });
</script>

四、focus()與blur()的配合使用

這兩個方法經常一起使用，就像一對好搭檔：

// 輸入框獲得焦點時
$("#inputField").focus(function() {
  $(this).css("border", "2px solid #4CAF50");
  $(this).val("請輸入內容..."); // 清空默認提示
});

// 輸入框失去焦點時
$("#inputField").blur(function() {
  if ($(this).val() === "請輸入內容...") {
    $(this).val(""); // 恢復為空
  }
  $(this).css("border", "1px solid #ccc");
});

五、一些實用小技巧

1. 觸發focus事件（通過代碼觸發）

// 代碼觸發id為username的輸入框獲得焦點
$("#username").focus();

2. 光標定位到輸入框末尾

function setFocusToEnd(id) {
  var input = $("#" + id);
  var val = input.val();
  input.val("");
  input.focus();
  input.val(val);
  // 光標會自動定位到末尾
}
// 使用示例
setFocusToEnd("username");

六、注意事項

  1. focus()和blur()是成對使用的：一個處理獲得焦點，一個處理失去焦點
  2. 不要和focusin()混淆：focusin是當元素或其子元素獲得焦點時觸發
  3. 移動端兼容性：在移動設備上，focus事件可能表現不一致
  4. 避免在事件處理函數中做複雜操作：影響頁面性能

七、為什麼用focus()方法？

在表單交互中，focus()方法能讓用户獲得更好的體驗：

  • 輸入框獲得焦點時提示輸入要求
  • 失去焦點時驗證輸入內容
  • 搜索框獲得焦點時顯示關鍵詞
  • 表單提交時自動聚焦到第一個錯誤字段