数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究自动聚焦 HTML5 属性的使用
我们从 HTML5 中获得了巨大的进步。基本的 HTML 现在可以用来执行以前由 JavaScript 和 Flash 处理的任务，例如基本的表单验证、INPUT 占位符以及音频/视频。HTML 中的 autofocus 属性允许我们在页面加载时自动将焦点放在组件上，这是一个另一个简单的功能。
当 autofocus 属性存在时，页面加载时 INPUT、TEXTAREA 或 BUTTON 元素已被选中。此属性在主要目标是收集信息的页面上特别有用。
Autofocus HTML5 属性
根据 autofocus 全局属性（这是一个布尔属性），当页面加载或其所属的 <dialogue> 显示时，应将焦点放在某个元素上。每个文档或对话框中只能有一个元素具有 autofocus 属性。如果对多个项目使用，则第一个项目将获得焦点。
语法
以下是 autofocus HTML5 属性的语法
<input name="q" autofocus />
让我们看一下以下示例，以便更好地理解 autofocus HTML5 属性的使用。
示例
在以下示例中，我们对 input 类型使用 HTML autofocus 属性。
<!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 输入类型使用了 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 属性的 click 按钮，这使得页面加载时按钮获得焦点。当用户点击按钮时，事件被触发并显示一个警报。
示例
在下面，我们对 inputtype 使用 datetime-local。
<!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>
输出
当脚本执行时，它将生成一个输出，其中包含一个文本区域字段，该字段填充了带有 autofocus 的文本，这使得页面加载时文本区域字段获得焦点。
165 次查看
