進入編輯頁面時，如何把游標聚焦到第一個input？

王铁柱6發表於2024-12-11

要讓游標在頁面載入時自動聚焦到第一個 input 元素，有很多方法，以下是幾種常見且推薦的做法：

1. 使用 autofocus 屬性 (HTML5)

這是最簡單直接的方法。在第一個 <input> 元素中新增 autofocus 屬性即可。瀏覽器載入頁面後會自動將游標聚焦到該元素。

<input type="text" autofocus>
<input type="text">

需要注意的是： 一個頁面中只能有一個元素擁有 autofocus 屬性。如果有多個元素都設定了 autofocus，瀏覽器通常會聚焦到頁面中最後出現的那個。

2. 使用 JavaScript 的 focus() 方法

這種方法更加靈活，可以根據各種條件來控制聚焦。你可以在頁面載入完成後，使用 JavaScript 獲取第一個 input 元素，然後呼叫它的 focus() 方法。

<input type="text" id="firstInput">
<input type="text">

<script>
  window.onload = function() {
    document.getElementById('firstInput').focus();
  };
</script>

或者使用更現代的寫法：

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('input').focus(); // 選擇第一個input元素
});

這種方法的優勢在於你可以根據需要新增更復雜的邏輯，例如：

  • 根據使用者行為決定是否聚焦
  • 在特定條件下聚焦到不同的 input 元素

3. 使用 JavaScript 的 setTimeout() 方法 (處理非同步載入)

如果你的 input 元素是透過非同步載入的方式新增到頁面中的（例如 Ajax 或動態渲染），那麼 window.onload 或 DOMContentLoaded 事件可能在 input 元素載入完成之前就觸發了。在這種情況下，你需要使用 setTimeout() 方法來延遲執行 focus()，確保 input 元素已經存在於 DOM 中。

document.addEventListener('DOMContentLoaded', () => {
  setTimeout(() => {
    const firstInput = document.querySelector('input');
    if (firstInput) {
      firstInput.focus();
    }
  }, 0); // 即使延遲時間為0，也能確保在DOM完全載入後執行
});

4. 考慮使用者體驗

雖然自動聚焦可以提高效率，但在某些情況下可能會讓使用者感到突兀。例如，如果使用者正在瀏覽其他內容，突然跳到輸入框可能會打斷他們的思路。因此，需要根據具體場景謹慎使用自動聚焦功能。 例如，在登入頁面或搜尋頁面中，自動聚焦通常是合理的；但在其他頁面中，則需要根據具體情況進行考慮。

總結: autofocus 屬性最簡潔，JavaScript 的 focus() 方法更靈活，setTimeout() 方法可以處理非同步載入的情況. 選擇哪種方法取決於你的具體需求和場景。 同時，也要注意使用者體驗，避免過度使用自動聚焦。

相關文章