在 JavaScript 中設定 HTML 表單元素的焦點

  1. 使用 JavaScript 在輸入中設定焦點
  2. 使用 JavaScript 在 Textarea 中設定焦點
  3. 使用 JavaScript 在選擇框或下拉選單中設定焦點

專注於使用者輸入的欄位是一種 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();
}