HTML autocomplete 属性

HTML autocomplete 语法

在 HTML 中，autocomplete 属性用于为表单元素提供一个自动完成功能。只有以下元素才支持 autocomplete 属性。

语法：

<element autocomplete="取值" >

说明：

autocomplete 属性除了常用的 on 和 off 之外，还支持特定的字段值，来帮助浏览器更智能地填充表单。

on（默认值）：启用自动完成功能。
off：禁用自动完成功能。
username：用户名。
current-password：当前密码（登录用）。
new-password：新密码（注册/改密用）。
email：电子邮箱。
tel：电话号码。

提示: 现代浏览器（尤其是 Chrome）为了方便用户，在处理密码框时往往会忽略 autocomplete="off"，然后强制提示 “保存密码” 或 “填充密码”。

HTML autocomplete 摘要

适用元素	input、textarea、select 或 form
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML autocomplete 示例

在实际开发中，autocomplete 属性一般都是结合 datalist 元素来实现自动提示功能。

示例：autocomplete 属性的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <input type="text" list="languages" autocomplete="on">
    <datalist id="languages">
        <option value="Python">Python</option>
        <option value="C">C</option>
        <option value="C++">C++</option>
        <option value="Java">Java</option>
        <option value="JavaScript">JavaScript</option>
    </datalist>
</body>
</html>

页面效果如下图所示。

HTML autocomplete属性的基本使用

分析：

当文本框获取焦点时，页面效果如下图 1 所示。如果输入内容时，页面效果如下图 2 所示。

HTML autocomplete属性示例效果1

HTML autocomplete属性示例效果2

在这个例子中，datalist 包含 5 个选项："Python"、"C"、"C++"、"Java"、"JavaScript"。当我们输入文本时，会看到一个可选的下拉列表。你可以选择其中一个选项，或者继续输入自己的文本。

由于 autocomplete 属性的默认值就是 "on"，因此对于上面例子来说，你把 autocomplete="on" 删除，效果也是一样的。当然了，你也可以使用 autocomplete="off" 来关闭此功能。