HTML - autofocus 屬性

HTML 的 **autofocus** 屬性是一個布林屬性，用於指定頁面載入後應自動聚焦哪個元素。

如果要在同一文件中的兩個元素中使用此屬性，則它始終優先於第一個元素。它適用於 input、textarea、button 和 select 等表單控制元件。

它不僅適用於表單控制元件，還可以用於所有元素。例如，它可能用於內容可編輯區域。

語法

<input autofocus>

應用於

以下列出的元素允許使用 HTML autofocus 屬性。

元素	描述
<input>	HTML <input> 標籤用於指定輸入欄位。
<button>	HTML <button> 標籤用於定義可點選按鈕。
<select>	HTML <select> 標籤用於定義下拉列表
<textarea>	HTML <textarea> 標籤用於表示多行純文字編輯控制元件。

HTML autofocus 屬性示例

以下程式碼演示了 autofocus 屬性的使用方法

使用按鈕元素自動聚焦

在以下示例中，我們使用 HTML autofocus 屬性指定頁面載入後元素自動獲得焦點。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'autofocus' attribute</title>
</head>

<body>
   <!--HTML 'autofocus' attribute-->
   <p> HTML 'autofocus' attribute</p>
   <button onclick="func()" autofocus>Click me!</button>
   <script>
      function func() {
         alert("You clicked 'click me!");
      }
   </script>
</body>

</html>

使用輸入元素自動聚焦

考慮另一種情況，我們將使用 autofocus 屬性與 input type=text 一起使用。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'autofocus' attribute</title>
</head>

<body>
   <!--HTML 'autofocus' attribute-->
   <p>HTML 'autofocus' attribute</p>
   <form>
      <label for="">First Name: </label>
      <input type="text" autofocus>
      <br>
      <br>
      <label for="">Last Name: </label>
      <input type="text">
      <br>
      <br>
      <button>Submit</button>
   </form>
</body>

</html>

使用文字區域元素自動聚焦

讓我們看看以下示例，我們將使用 autofocus 屬性與 textarea 標籤一起使用。輸出將顯示獲得焦點的文字區域欄位以及網頁上的一個點選按鈕。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'autofocus' attribute</title>
</head>

<body>
   <!--HTML 'autofocus' attribute-->
   <p>HTML 'autofocus' attribute</p>
   <form>
      <label for="">Write your feedback: </label>
      <br>
      <textarea 
         name=""
         id="" 
         cols="40" 
         rows="8" 
         placeholder="write feedback...." 
         autofocus>  </textarea>
      <button>Submit</button>
   </form>
</body>

</html>

使用選擇元素自動聚焦

以下是一個示例，我們將使用 autofocus 屬性與 select 元素一起使用。當我們執行以下程式碼時，它將生成一個輸出，其中包含獲得焦點的下拉選單以及網頁上顯示的點選按鈕。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'autofocus' attribute</title>
</head>

<body>
   <!--HTML 'autofocus' attribute-->
   <p>Example of the HTML 'autofocus' attribute</p>
   <form>
      <p>Choose your language: </p>
      <select name="" id="" autofocus>
      <option value="">Hindi</option>
      <option value="">English</option>
      <option value="">Telugu</option>
      </select>
      <button>Submit</button>
   </form>
</body>

</html>

支援的瀏覽器

屬性
autofocus	是	是	是	是	是

html_attributes_reference.htm

列印頁面