在 JavaScript 中設定 HTML 表單元素的焦點
專注於使用者輸入的欄位是一種 UI/UX 功能，允許使用者在不單擊欄位的情況下繼續在欄位中輸入。我們可能需要動態地將焦點應用到表單域上，尤其是當表單很長並且有很多輸入域時。如果表單欄位存在驗證錯誤，使用者將很難在這種情況下找出該欄位。因此，將焦點設定到 javascript 中的欄位，同時驗證並自動滾動到錯誤欄位，將錯誤直接指示給使用者，而不是浪費時間找出錯誤所在。在 JavaScript 中，我們有 .focus() 方法。讓我們看看如何將這些應用於以下內容。
使用 JavaScript 在輸入中設定焦點
為了關注輸入欄位，我們首先需要選擇該欄位。有多種方法可以做到這一點。我們可以使用以下任何一種方法。
document.getElementById()：根據元素的 id 查詢元素。通常 id 是唯一的，因此getElementById()函式唯一地返回元素。如果有更多具有相同 id 的元素，則返回具有指定 id 的第一個元素。document.getElementsByClassName()：根據類名選擇元素。它通常返回符合條件的元素陣列。querySelector()：JavaScript 方法根據元素的 id、類名，甚至是 HTML 元素的標籤來選擇元素。該函式返回滿足作為引數傳遞給它的條件的單個 HTML 元素。在本文中，我們將使用getElementById()函式來簡化表示。一旦我們選擇了元素，我們就可以使用.focus()方法將焦點設定在該元素上。以下是.focus的語法。
document.getElementById("input-id").focus();
將焦點設定在輸入欄位上
以下程式碼將焦點設定在頁面載入時的輸入欄位上。
<input id="username-input" type="text" name="username">
window.onload = function () {
document.getElementById("username-input").focus();
}
將焦點設定在 HTML 表單中的輸入欄位上
如果輸入元素是表單的一部分，我們可以使用表單名稱引用，而不是使用 getElementById() 查詢元素。用法的語法如下：
document.<Form name>.<Field name>.focus();
例如，假設我們有一個帶有輸入欄位的登入表單。我們可以通過應用以下程式碼來設定輸入欄位的焦點。程式碼將設定焦點在使用者名稱輸入欄位上。在使用表單名稱和欄位名稱以讓以下程式碼工作時，需要注意的事情很少。
<form name="LoginForm">
<div>
<label>User Name: </label>
<input type="text" name="UserName">
</div>
<div>
<label>Password: </label>
<input type="password" name="password">
</div>
</form>
window.onload = function () {
document.LoginForm.UserName.focus();
}
評論
- 在表單中設定輸入的焦點時，我們必須將 name 屬性分配給 HTML 表單和我們要定位的欄位。如果未指定名稱，將很難查詢元素。
- 此方法不支援此方法中帶有連字元的標籤名稱。因此，分配給 HTML 表單或元素的名稱應該是駝峰式大小寫（如
使用者名稱）或小寫（如使用者名稱）。 - 對於具有許多欄位（如輸入、文字區域等）的較長表單，最好為元素設定滾動屬性，以便瀏覽器將焦點 HTML 元素自動滾動到檢視中。這是使用者期望的預期行為。否則他最終會想知道為什麼表格無效。
document.getElementById("myButton").focus({preventScroll:false});
使用 JavaScript 在 Textarea 中設定焦點
我們可以使用 .focus() 函式將焦點設定到文字區域。通常，為了聚焦在文字區域，我們使用 document.getElementById("my-text-area").focus()。它類似於在輸入欄位中使用 .focus() 函式。如果我們打算在 HTML 表單標籤內使用文字區域，那麼我們可以應用表單名稱引用和文字區域名稱來關注它。參考以下程式碼。
<form name="LoginForm">
<div>
<label>User Name: </label>
<input type="text" name="UserName">
</div>
<div>
<label>Password: </label>
<input type="password" name="password">
</div>
<div>
<label>Description: </label>
<textarea name="description"></textarea>
</div>
</form>
window.onload = function () {
document.LoginForm.description.focus();
}
在此方法中，我們必須為表單和目標 HTML 元素指定一個名稱。元素的命名規則與輸入欄位的命名規則相同。
使用 JavaScript 在選擇框或下拉選單中設定焦點
.focus() 方法適用於選擇框或下拉選單。如果在表單中使用，則可以使用 document.FormName.SelectBoxName.focus() 將焦點設定到下拉選單。以下是詳細說明用法的程式碼。
<form name="LoginForm">
<div>
<label>User Name: </label>
<input type="text" name="UserName">
</div>
<div>
<label>Password: </label>
<input type="password" name="password">
</div>
<div>
<label>Description: </label>
<textarea name="description"></textarea>
</div>
<div>
<label>Occupation: </label>
<select id="occupationSelect" autofocus>
<option>Student</option>
<option>Teacher</option>
<option>Engineer</option>
</select>
</div>
</form>
window.onload = function () {
document.LoginForm.occupationSelect.focus();
}