autofocus HTML5 屬性的使用


HTML5 帶來了巨大的進步。現在,基本的 HTML 可以執行以前由 JavaScript 和 Flash 處理的任務,例如基本的表單驗證、INPUT 佔位符以及音訊/影片。HTML 中的 autofocus 屬性允許我們在頁面載入時自動將焦點設定到元件上,這是一個非常簡單的功能。

當存在 autofocus 屬性時,頁面載入時,INPUT、TEXTAREA 或 BUTTON 元素將被選中。此屬性在主要目的是資訊收集的頁面上特別有用。

Autofocus HTML5 屬性

根據 autofocus 全域性屬性(一個布林屬性),頁面載入時或其所屬的 `` 元素顯示時,應將焦點設定到某個元素上。每個文件或對話方塊中只能有一個元素具有 autofocus 屬性。如果使用了多個元素,則第一個元素將獲得焦點。

語法

以下是 autofocus HTML5 屬性的語法

<input name="q" autofocus />

讓我們來看下面的例子,以便更好地理解 autofocus HTML5 屬性的使用。

示例

在下面的示例中,我們使用 HTML autofocus 屬性用於 input 型別。

<!DOCTYPE html>
<html>
   <body>
      <h1>The autofocus attribute</h1>
      <form>
         <label for="fname">User name:</label>
         <input type="text" id="uname" name="uname" autofocus><br><br>
         <label for="fullname">Full name:</label>
         <input type="text" id="lname" name="lname"><br><br>
         <input type="submit">
      </form>
   </body>
</html>

輸出

當指令碼執行時,它將生成一個輸出,其中包含一個允許使用者輸入文字的輸入欄位,並且 username inputtype 提到的是 autofocus,這意味著頁面載入時輸入欄位將獲得焦點。

示例

考慮另一個使用 HTML autofocus 屬性用於按鈕的例子。

<!DOCTYPE html>
<html>
   <body>
      <h1>The button autofocus attribute</h1>
      <button type="button" autofocus onclick="alert('Welcome To TP')">CLICK</button>
   </body>
</html>

輸出

執行上述指令碼後,將彈出輸出視窗並顯示帶有 autofocus 屬性的單擊按鈕,這使得頁面載入時按鈕獲得焦點。當用戶單擊按鈕時,事件被觸發並顯示一個警報。

示例

在下面,我們使用 datetime-local 作為 inputtype。

<!DOCTYPE html>
<html>
   <body>
      <h1>The textarea autofocus attribute</h1>
      <textarea rows="3" cols="40" autofocus>
         Mahendra Singh Dhoni is an Indian former international cricketer
         who was captain of the Indian national cricket team in limited-overs
         formats from 2007 to 2017 and in Test cricket from 2008 to 2014.
      </textarea>
   </body> 
</html>

輸出

當指令碼執行時,它將生成一個輸出,其中包含一個帶有文字的 textarea 欄位,autofocus 使得頁面載入時 textarea 欄位獲得焦點。

更新於:2023年10月11日

165 次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.