一、关于表单自动填充

表单自动填充是个好功能，因为可以省去用户自己输入的麻烦。

比方说一个 name 属性值是 email 的输入框，聚焦点击后，可能就出现邮箱列表。奇怪，怎么出现了手机号？

应该是某个产品的 name 属性值是email，但是却支持手机号输入，然后被浏览器记住了。

大多数时候，用户很喜欢这个功能。

但是有时候，用户并不需要。

比方说验证码输入框，每次的验证码都是随机的，是没有任何理由是需要浏览器进行记忆的。

以及，如果采用了浏览器的自动填充input输入框的样式，比方说背景色，就会变成浏览器默认的自动填充背景色。

而这种浏览器默认的色值往往和产品的主题色并不一致，产品或者设计师往往会要求进行重置。

于是，此时，表单自动填充的行为就变得不美丽了，希望取消。

浏览器也确实提供了取消自动填充的html属性 autocomplete 以及匹配自动填充状态的 :autofill 伪类，既然浏览器有了能力，似乎问题到此结束了。

然而非也，又很多时候，明明设置了 autocomplete="off" ，但是依然有自动填充。

咦？这是怎么回事呢？

没有什么怎么回事，就是浏览器的策略，浏览器说不要你觉得，而是我觉得 ！

我们可以在 caniuse 上 看到对各个浏览器那种情况下 autocomplete="off" 无效的描述，具体如下：

• Chrome浏览器在用户使用了自动填充功能的情况下， autocomplete="off" 无效。
  
• Safari浏览器在 username，email 和 password文本框的时候，关闭自动填充无效。
  
• Firefox浏览器则是在登录表单中无法使用 autocomplete="off" 关闭自动提示。
  

所以，问题就变成了，autocomplete off 无效怎么办？

二、autocomplete off 无效怎么办

这个要分情况。

一种是阻止非交互自动填充，一种是阻止交互式自动填充。

阻止非交互自动填充

所谓非交互自动填充，指的是无需用户操作，一进入页面，浏览器就帮你把对应的数据填充好了。

例如账号和密码是比较常见的自动填充能力。

例如有如下所示的HTML代码：

<form>
    账号：<input name="email" placeholder="手机号或邮箱">
    密码：<input type="password" name="pwd">
</form>

如果你有让浏览器记住当前域名下的密码，则一进入页面就有可能会看到类似下面这样的自动填充：

此时，你给输入框元素，哪怕给外面的 <form> 元素（如果有）设置autocomplete off都是无效的，那该怎么办？

· 根据我的测试，效果比较好的，是一种名为“李代桃僵”的方法，就是在表单元素的前面插入两个替身使者，就像下面这样的：

<!-- 浏览器认为的 -->
<input disabled style="opacity: 0;position: absolute; top:-99px">
<input type="password" disabled style="opacity: 0;position: absolute; top:-99px">
<!-- 用户看见的 -->
账号：<input name="email" placeholder="手机号或邮箱">
密码：<input type="password" name="pwd">

· 对password密码输入框设置 autocomplet="new-password" 在Firefox浏览器下有效，不过在Chrome浏览器下无效。

· 还可以给密码输入框设置 readonly 属性，在第一次按下的时候移除来规避自动填充：

<input type="password" name="pwd" readonly autocomplete="off" onMouseDown="this.removeAttribute('readonly')">

虽然上面的方法可以让默认进入的时候没有自动填充，但是，当用户点击输入框的时候，又会出现类似下面的烦人提示，该如何规避呢？

无解！

没必要规避，密码的系统呼出框建议就无视好了。

如果非要解决，也可以，使用普通input输入框覆盖在password输入框上面，颜色设置为透明，光标颜色设置为文字颜色，隐藏边框和背景色。

代码示意：

<input class="cover">
<input type="password" name="new-password">

.cover {
    position: absolute;
    -webkit-text-fill-color: transparent;
    border-color: transparent;
    background: none;
}
.cover,
.cover ~ input {
    font-family: Consolas, Monaco, "Courier New", monospace;    
}

然后密码输入框的value和覆盖的输入框实时同步即可。

此时，focus密码框就不会有系统的密码管理提示了。

眼见为实，您可以狠狠地点击这里： 密码输入框的自动填充和系统提示关闭demo

阻止自动填充

这个的解决相对简单点，多出现在相同name属性值的输入框，或者兄弟输入框有着历史相同name或者类型数据记录的时候。

此时，要么使用 autocomplete="off" ，要么使用 autocomplete="new-password" 。

如果上面两个属性值都无效，那就……可以整个在线demo，我可以帮大家看下怎么回事。

例如一开始那个name属性值是email的输入框的下拉提示，在我设置 autocomplete="off" 之后，再次点击输入框，再也看不到下拉出现了。

三、新时代的autocomplete

在过去， autocomplete 支持的属性值比较单纯，就 on 和 off， autocomplete 支持的属性值有好几十个。

对，你没看到，有好几十个，容易理解的有username，new-password，current-password等，长得像妖魔鬼怪的像是cc-name，bday-day，impp等。

我自己测试了几个属性值，比方说 username，发现和设置属性值为on 效果一样：

<input name="code" autocomplete="username">

如果是设置的随机的乱七八糟的值，则和 off 效果一样：

<input name="code" autocomplete="xxxxx">

这个特性表现值得深思……

四、自动填充样式的重置

css :autofill 伪类可以匹配已经自动填充的输入框，因此，可以用来重置自动填充时候的高亮背景色，例如下图是火狐下的自动填充效果，是非常骚气的淡黄色。

因为是背景色，很多开发人员自然而然会想到使用类似下面的代码进行重置：

:-webkit-autofill { background-color: transparent; }
:autofill { background-color: transparent; }

结果很遗憾，上面的代码并不能重置系统的自动填充背景色。

其实仔细一想就好理解了，既然浏览器要保证输入框高亮背景色能够显示，肯定是不可能被普普通通一个CSS背景样式就被重置的。

所以这里，想要让自动填充的高亮背景色不显示，需要使用其他方法，目前业界用的比较多的就是使用巨大的box-shadow内阴影进行覆盖，代码示意：

:-webkit-autofill { box-shadow: inset 0 0 0 2000px #fff; }
:autofill { box-shadow: inset 0 0 0 2000px #fff; }

此时，自动填充带来的高亮背景色就不可见了。

五、结尾的絮叨

大多数情况下，输入框的自动填充行为我们无需处理，用户并不在意输入框颜色变了，或者出现一些样式不一致的提示效果。

但是，有一种情况则不然，那就是输入框本身有下拉行为的时候。

例如开发者自定义了一套Autocomplete组件列表功能，结果用户focus输入框的时候，自定义的列表和系统的自动完成列表同时出现了，就像下面这样：

这个时候就不能不处理了，方法一般就是设置autocomplete属性值是off，如果不行再试试new-password，还是不行试试删除name属性值。

最后，再提一嘴。

autocomplete 的策略浏览器是不断变化的，我写文章这会儿，和我两年前研究的结果已经发生了变化，Chrome有段时间off属性值就是摆设，普通的自动填充就无法规避，但是现在看，已经没有这个问题了。

来自： https://www.zhangxinxu.com/wordpress/?p=10525

链接: https://www.fly63.com/article/detial/12156