HTML 表单元素的自动填充与聚焦样式

配图源自 Freepik

今天来看一下与表单元素相关的两个东西：

outline：绘制轮廓样式
autocomplete：表单自动填充功能

outline

在绝大多数浏览器中，如果一个元素是可交互的，它一般都有一个可见的聚焦提示。比如 Chrome 浏览器下当 <input> 聚焦时，默认会有一个蓝色的边框。

从用户交互体验上讲，浏览器这种提示是好的，比如，一个良好的按钮交互，应该要包括被按下那一刻的样式。

但可能默认样式与你的页面风格不相符，然后就需要先移除默认样式，然后再自定义。

比如有一个 <input> 元素聚焦时，在不添加任何样式情况下，Chrome 浏览器表现如下图：

<input type="text" placeholder="请输入文本" />

想要移除这种默认聚焦样式，非常地简单，只要添加以下样式即可：

input {
  outline: none;
}

将 outline 设置为 0 或 none 会移除浏览器的默认聚焦样式。

outline 是 outline-style、outline-width、outline-color 的简写，用于绘制元素轮廓的样式。

它跟 boder 很类似，区别在于 outline 不占据空间，绘制于元素内容周围。

对于很多元素来说，如果没有设置样式，轮廓是不可见的。因为样式的默认值是 none。但 <input> 元素是例外，其样式默认值由浏览器决定。

语法如下：

/* 样式 */
outline: solid;

/* 颜色 | 样式 */
outline: #f66 dashed;

/* 样式 | 宽度 */
outline: inset thick;

/* 颜色 | 样式 | 宽度 */
outline: green solid 3px;

在实际场景中，我还真只见过移除默认样式，还没有遇到主动设置样式的。因此取值不做详细介绍，更多请看MDN。

autocomplete

我们可以观察到一个现象，当我们聚焦某个输入框的时，浏览器会有一个历史输入的提示，比如：

<input name="nickname" type="text" placeholder="请输入昵称" />

Chrome 浏览器可能会出现如图类似「建议值」提示：

这是什么回事呢？原来是浏览器会记录我们的文本输入历史，当 <input> 的 name 或 id 属性匹配的时候，就会有此提示（前提是启用了 autocomplete 属性）。上一个示例，由于 <input> 并未设置 name 或 id 属性，因此是没有提示的。

你可以试下改为 name="email"，那么文本提示就可能会出现你常输入的邮箱地址。

autocomplete 是什么？

MDN 描述如下：

HTML autocomplete 属性可用于以文本或数字值作为输入的 <input> 元素， <textarea> 元素，<select> 元素，和 <form> 元素。 autocomplete 允许 web 开发人员指定，如果有任何权限 user agent 必须提供填写表单字段值的自动帮助，并为浏览器提供关于字段中所期望的信息类型的指导。

一般来说，<input>、<select>、<textarea> 这些元素具备以下条件才会有自动填充功能：

具有 name 或 id 属性。
成为 <form> 的后代。
具有 submit 按钮的表单。

自动填充的建议值来源通常取决于浏览器。一般是来自用户输入的过去值，但它们也可能来自预先配置的值。

自动填充功能通常是默认启用的，如果想要关闭，可以为整个表单设置或为表单中某个输入元素单独设置：

<form id="form1" autocomplete="off">
  <!-- 这时，其下属表单元素将会默认关闭 autocomplete -->
  <input name="nickname" type="text" placeholder="请输入昵称" />
</form>

<form id="form2">
  <!-- 可对其下属表单元素独立设置 autocomplete -->
  <input name="nickname" type="text" placeholder="请输入昵称" autocomplete="off" />
</form>

<form id="form3" autocomplete="off">
  <!-- 当 form 和下属表单元素同时指定 autocomplete 时，下属表单会覆盖 form 元素的指定 -->
  <input name="nickname" type="text" placeholder="请输入昵称" autocomplete="on" />
</form>

设置 autocomplete="off" 会有两种效果：

这会告诉浏览器，不要为了以后在类似表单上自动填充而保存用户输入的数据。但浏览器不一定遵守。
这会阻止浏览器缓存会话历史记录中的数据。若表单数据缓存于会话历史记录，用户提交表单后，再点击返回按钮返回之前的表单页面，则会显示用户之前输入的数据。

如果即使在 autocomplete 已经设置为 off 时，浏览器仍继续提供输入建议，那么你需要更改输入元素的 name 属性。

其他

许多现代浏览器，不支持在登录字段中设置 autocomplete="off"（即使设置了也会有提示），因为浏览器内置了密码管理，它们认为对安全是有益无害的。更多请看这里。

注意： 在大多数现代浏览器中， autocomplete 设置为 "off" 不会阻止密码管理器询问用户是否要保存用户名和密码信息，或者自动在网站的登录表单中填写这些值。请参阅 the autocomplete attribute and login fields。

如果我们希望在密码字段阻止自动填充，可以添加 autocomplete="new-password" 来避免意外填写现有密码：

<input name="password" type="password" placeholder="请输入密码" autocomplete="new-password" />

除了常见的 "on"、"off" 之外，更多 autocomplete 取值请看这里。

小结

按照规范，当指定 autocomplete="on" 或 autocomplete="off" 时，会启用或关闭自动填充功能。但是实际情况是，浏览器不一定遵循标准实现。

所以，规范只是弟弟，浏览器厂商才是大爷啊。

toFrankie / blog