詳解input聚焦

一、聚焦的含義及用途

聚焦，指的是用戶將鼠標或鍵盤焦點移動到了某一個具有聚焦效果的元素上。常見的聚焦元素包括input、textarea、button等，通過聚焦可以提高用戶交互體驗和操作效率。

在實際應用中，聚焦用途廣泛。比如說，在搜索框中當用戶聚焦後可以自動提示輸入內容，提高用戶搜索效率，亦或者在表單中聚焦到必填項上以提醒用戶填寫等等。

二、聚焦事件

聚焦事件指的是當聚焦事件觸發時所執行的事件。在HTML中，可以使用onfocus事件來定義聚焦事件的觸發操作。如下示例所示：

<input type="text" onfocus="console.log('input is focused')"></input>

上述代碼定義了一個input元素，並添加了onfocus事件，當此元素被聚焦時會在瀏覽器控制台打印’input is focused’。

除了onfocus事件，還有onblur事件。當給定元素失去焦點時，onblur事件將會被激活。在應用中，可以使用onblur事件來檢查用戶填寫的內容是否合規等操作。

三、聚焦樣式

通過CSS，我們可以為獲取焦點的元素添加聚焦樣式。這裡介紹兩種方式：

1. 使用:focus偽類

:focus偽類表示鼠標或鍵盤焦點已經落到了此元素上。可以通過給元素添加:focus偽類來定義聚焦狀態下的樣式。

input:focus {
    border-color: blue;
}

上述代碼定義了一個input元素，當此元素被聚焦時邊框將變成藍色。

2. 使用:focus-within偽類

:focus-within偽類表示當此元素或其任何後代元素具有焦點時，此元素都會被選中。可以通過:focus-within偽類來定義任何在聚焦狀態下的子元素的樣式。

.container:focus-within {
    background-color: lightgreen;
}

上述代碼定義了一個類名為container的元素，當此元素或其任何後代元素被聚焦時，該元素的背景色將變成淺綠色。

四、聚焦操作

在實際應用中，我們常常需要對用戶的聚焦行為進行操作，下面我們介紹兩種常見的聚焦操作方法。

1. 自動聚焦

在一些情況下，需要將用戶的聚焦行為轉化為代碼動作。例如，加載頁面時自動聚焦到搜索框，或在表單中自動聚焦到第一個輸入項等。通過給需要自動聚焦的元素設置autofocus屬性即可實現自動聚焦。

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

2. 手動聚焦

手動聚焦在一些複雜交互組件中也有廣泛的應用。比如在輸入框聚焦時顯示下拉框，在下拉框中選擇後自動聚焦到下一個輸入框等。通過JavaScript代碼，我們可以手動將焦點聚焦到特定元素上。

let input = document.querySelector('input');
input.focus();

五、聚焦輔助技術

無障礙聚焦技術是指在整個聚焦交互過程中，讓視覺障礙用戶或者其他特殊情況下的用戶能夠更好地理解UI元素的聚焦情況。對於這些用戶，我們需要使用一些特殊的聚焦輔助技術。

1. 使用aria-label和aria-labelledby

在一些具有表單標籤的字段中，我們可以通過使用aria-labelledby/aria-label進行標籤的提醒，以便於盲人用戶理解當前所處的聚焦下的表單項是什麼。

<label for="username">用戶名</label>
<input type="text" id="username" aria-labelledby="username"></input>

2. 使用aria-invalid

在表單項校驗不合規時，需要把aria-invalid=true添加到input或與其相關的元素中，以便於在UI上高清出當前節點是不合規的。

<input type="text" aria-invalid="true"></input>

3. 使用aria-describedby

如果有的標籤在輸入起來不足夠清晰時需要補充說明，可以用`aria-describedby`在輸入框前提示或後來增加補充說明性文本。

<label for="username">用戶名</label>
<input type="text" id="username" aria-describedby="description-validation"></input><p id="description-validation">用戶名必須為3-10個字符</p>