HTMLElement: focus() 方法
Baseline 廣泛可用 *
HTMLElement.focus() 方法會將焦點設定到指定的元素上，前提是該元素可以獲得焦點。獲得焦點的元素將預設接收鍵盤和類似事件。
預設情況下，瀏覽器在聚焦元素後會滾動頁面以使其進入視口，並且可能還會提供可見的焦點指示（通常是透過在元素周圍顯示“焦點環”）。提供了引數選項來停用預設滾動並強制在元素上顯示可見指示。
語法
focus()
focus(options)
引數
options可選-
一個可選物件，用於控制聚焦過程的各個方面。此物件可能包含以下屬性：
preventScroll可選-
一個布林值，指示瀏覽器是否應滾動文件以將新獲得的焦點元素帶入視口。
preventScroll的值為false（預設值）表示瀏覽器在聚焦元素後會將其滾動到視口。如果將preventScroll設定為true，則不會發生滾動。 focusVisible可選 實驗性-
一個布林值，應將其設定為
true以強制顯示元素獲得焦點的可見指示，或設定為false以阻止顯示。如果未指定該屬性，瀏覽器將提供可見指示，如果它認為這能提高使用者可訪問性。
返回值
無（undefined）。
示例
聚焦文字欄位
此示例使用一個按鈕來將焦點設定到文字欄位。
HTML
<input id="myTextField" value="Text field." />
<button id="focusButton">Click to set focus on the text field</button>
JavaScript
下面的程式碼向按鈕添加了一個事件處理程式，以便在按下按鈕時將焦點設定到文字欄位。請注意，大多數瀏覽器會自動為獲得焦點的文字欄位新增可見指示（“焦點環”），因此程式碼不會將 focusVisible 設定為 true。
document.getElementById("focusButton").addEventListener("click", () => {
document.getElementById("myTextField").focus();
});
結果
選擇按鈕以將焦點設定到文字欄位。
聚焦按鈕
此示例演示瞭如何將焦點設定到按鈕元素。
HTML
首先，我們定義三個按鈕。中間的按鈕和最右邊的按鈕都將把焦點設定到最左邊的按鈕。最右邊的按鈕還將指定 focusVisible。
<button id="myButton">Button</button>
<button id="focusButton">Click to set focus on "Button"</button>
<button id="focusButtonVisibleIndication">
Click to set focus and focusVisible on "Button"
</button>
JavaScript
下面的程式碼設定了中間按鈕和最右邊按鈕的點選事件處理程式。
document.getElementById("focusButton").addEventListener("click", () => {
document.getElementById("myButton").focus();
});
document
.getElementById("focusButtonVisibleIndication")
.addEventListener("click", () => {
document.getElementById("myButton").focus({ focusVisible: true });
});
結果
選擇中間按鈕或最右邊的按鈕將焦點設定到最左邊的按鈕。
瀏覽器通常不會在以程式設計方式設定焦點時顯示按鈕元素的可見焦點指示，因此選擇中間按鈕的效果可能不明顯。但是，如果您的瀏覽器支援 focusVisible 選項，您應該會在選擇最右邊的按鈕時看到焦點轉移到最左邊的按鈕上。
聚焦並帶/不帶滾動
此示例顯示了將焦點設定為 preventScroll 選項為 true 和 false（預設值）時的效果。
HTML
HTML 定義了兩個按鈕，它們將用於設定第三個螢幕外按鈕的焦點。
<button id="focus_scroll">Click to set focus on off-screen button</button>
<button id="focus_no_scroll">
Click to set focus on offscreen button without scrolling
</button>
<div id="container">
<button id="myButton">Button</button>
</div>
JavaScript
此程式碼在第一個和第二個按鈕上設定了一個點選事件處理程式，以將焦點設定到最後一個按鈕。請注意，第一個處理程式未指定 preventScroll 選項，因此將啟用滾動到獲得焦點的元素。第二個處理程式設定 preventScroll 為 true，因此滾動將被停用。
document.getElementById("focus_scroll").addEventListener("click", () => {
document.getElementById("myButton").focus(); // default: {preventScroll:false}
});
document.getElementById("focus_no_scroll").addEventListener("click", () => {
document.getElementById("myButton").focus({ preventScroll: true });
});
結果
選擇第一個按鈕以設定焦點並滾動到螢幕外按鈕。選擇第二個按鈕會設定焦點，但會停用滾動。
規範
| 規範 |
|---|
| HTML # dom-focus-dev |
注意
- 如果在
mousedown事件處理程式中呼叫HTMLElement.focus()，則必須呼叫event.preventDefault()以防止焦點離開HTMLElement。 - 焦點與各種 HTML 特性（如
tabindex或 shadow dom）相關的行為，此前一直未明確規定，已於 2019 年 10 月更新。有關更多資訊，請參閱 WHATWG 部落格。
瀏覽器相容性
載入中…
另見
HTMLElement.blur用於移除元素的焦點。document.activeElement用於瞭解當前獲得焦點的元素。