HTML autofocus 属性

HTML autofocus 语法

在 HTML 中，autofocus 属性是一个全局属性，它用于实现元素自动获取焦点。autofocus 虽然是全局属性，但它只会对 “可聚焦（Focusable）” 的元素生效，比如：

input
textarea
select
button
area
audio（需包含 controls 属性）
video（需包含 controls 属性）
任何设置了 contenteditable 或 tabindex 属性的元素

语法：

<element autofocus>

说明：

element 是支持 autofocus 属性的元素。autofocus 是一个布尔属性，在 HTML5 标准中，下面 2 种写法是等价的。

<!--写法1（推荐）-->
<element autofocus>

<!--写法2-->
<element autofocus="autofocus">

对于 autofocus 属性，小伙伴们要清楚以下 2 点。

在一个页面中，最多只能有一个元素具有 autofocus 属性。如果存在多个元素使用 autofocus 属性，那么第一个元素将获得焦点。
autofocus 自动获得焦点，会导致页面在加载时滚动到相应焦点，这可能会对用户体验造成影响。因此在使用之前，一定要斟酌清楚是否有必要使用。

什么是布尔属性？

布尔属性（Boolean Attributes），是一种特殊的 HTML 属性。它们的存在本身就表示一个 true（真）值，而它们的缺失则表示 false（假）值。你不需要给它们赋一个显式的值（比如 true 或 false）就能让它们生效。

就拿 required 属性来说：

<input type="text" required>：表示这个文本输入框是 “必填” 的。
<input type="text">：表示这个文本输入框是 “非必填” 的。

对于布尔属性来说，虽然下面 2 种写法是等价的。但 HTML5 更加推荐写法 1（即只写属性名、不带任何值）

<!--写法1：推荐-->
<input type="text" required>

<!--写法2-->
<input type="text" required="required">

注意，下面这种写法是错误的。

<!--错误写法-->
<input type="text" required="true">

其中，常见的布尔属性有：

autofocus：页面加载时，元素自动获得焦点。
hidden：是否隐藏元素。
checked：是否选中，用于单选按钮和复选框。
disabled：是否禁用。
readonly：是否只读。
required：是否必填，用于 input、textarea 和 select 元素。
selected：是否选中，用于 option 元素。
multiple：是允许多选，用于 input 和 select 元素。
novalidate：是否跳过内置的验证功能，用于 form 元素。
autoplay：是否自动播放，用于 audio 和 video 元素。
loop：是否循环播放，用于 audio 和 video 元素。

HTML autofocus 摘要

属于	HTML 属性
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML autofocus 示例

接下来，我们通过几个简单的例子来讲解一下 HTML autofocus 属性是如何使用的。

示例 1：autofocus 属性的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <input type="text"><br>
    <input type="text" autofocus><br>
    <input type="text">
</body>
</html>

页面效果如下图所示。

HTML autofocus属性的基本用法

分析：

在上面例子中，我们给第 2 个 input 元素加上了 autofocus 属性，因此打开页面时就会自动获取焦点，而其他 input 元素则不会获取焦点。

示例 2：多个元素使用 autofocus 属性

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <input type="text" autofocus><br>
    <input type="text" autofocus><br>
    <input type="text" autofocus>
</body>
</html>

页面效果如下图所示。

多个元素使用autofocus属性

分析：

如果页面存在多个元素使用 autofocus 属性，那么只有第 1 个拥有 autofocus 属性的元素才会自动获取焦点。

注意: 滥用 autofocus 可能会让屏幕阅读器用户感到困惑，因为焦点突然跳转，用户可能不知道自己身在何处。

示例 3：autofocus 属性的更多应用

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <dialog open>
        <p>欢迎来到绿叶网</p>
        <button autofocus>确定</button>
    </dialog>
</body>
</html>

页面效果如下图所示。

HTML autofocus属性的更多应用

分析：

上面例子使用 dialog 元素实现了一个最基本的对话框。由于我们给 button 元素加上了 autofocus 属性，因此默认情况下它就会自动获取焦点。