HTML - autofocus 属性

HTML autofocus 属性是一个布尔属性，用于指定元素在页面加载后应自动聚焦。

如果我们要在同一文档中的两个元素中使用此属性，那么它始终优先于第一个元素，element.it 与输入、texxtarea、button 和 select for、控件一起使用。

它不仅适用于表单控制，而且还可以与所有元素一起使用。例如，它可能用于内容可编辑区域。

语法


<input autofocus>

适用于

下面列出的元素允许使用 HTML autofocus 属性。

元素	描述
<input>	HTML <input> 标签用于指定输入字段。
<button>	HTML <button> 标签用于定义可点击按钮。
<select>	HTML <select>标签用于定义下拉列表
<textarea>	HTML <textarea> 标签用于表示多行纯文本编辑控件。

HTML autofocus 属性的示例

以下代码演示了autofocus 属性的用法

按钮元素使用 autofocus

在以下示例中，我们使用 HTML 自动聚焦属性来指定元素在页面加载后自动聚焦。


<!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

考虑到另一个 sceario，我们将在其中使用自动对焦属性和输入 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>

使用 textarea 元素的autofocus

让我们看一下以下示例，其中我们将使用带有 textarea 标签的 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

以下示例，我们将在其中将 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>