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

打印页面