autofocus HTML5 属性的使用
HTML5 带来了巨大的进步。现在,基本的 HTML 可以执行以前由 JavaScript 和 Flash 处理的任务,例如基本的表单验证、INPUT 占位符以及音频/视频。HTML 中的 autofocus 属性允许我们在页面加载时自动将焦点设置到组件上,这是一个非常简单的功能。
当存在 autofocus 属性时,页面加载时,INPUT、TEXTAREA 或 BUTTON 元素将被选中。此属性在主要目的是信息收集的页面上特别有用。
Autofocus HTML5 属性
根据 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 字段获得焦点。
数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP