解决chrome的input莫名其妙被填充问题

曾经有个问题，困惑了很久很久....

问题如下，当我点击role下拉框时，居然给我弹出了 用户名的自动填充

这他妈真恶心，我点的仅仅是个 select，并非用户名区域

然后网上找了很多方法，什么修改 autocomplete为off，什么display:none，然后再显示等等等，其中大量的帖子都是复制，粘贴别人的东西。可能都没有自己测试过。

后来我发现，当我给一个input="text"设置 placeholder为邮箱、email，e-mail这三个关键字时，点击input，也会出现自动填充

如果里面没有包含这三个关键字，则不会出现自动填充

事实上，这个特性是浏览器的，它是通过判断placeholder中的关键字去找的。但是找的不是我们网页中的用户名和密码。而是浏览器的地址和其他信息中的邮箱

如果没有添加地址和邮箱，那么即使设置 placeholder为"email"也不会出现填充

除非新增个地址

来了

那么和我们平时看到的用户名密码的填充和邮箱填充有什么区别呢？

用户名密码的填充是在“密码区域”

并且在当前“ip和端口”下已经有之前保存过的用户名和密码，才会出现自动填充，

浏览器找密码区域很容易，只需要知道哪个input的type是password即可，那么它怎么知道谁是用户名呢？

原来浏览默认会去找 离type=“password”最近的上方的那个input域为“用户名”,进行填充，只要一获取焦点，就出现 "用户名填充区域"。

那么问题来了，我不想让点击input被填充(因为这真的很恶心)，该怎么做呢？

在我看来，有几下几个方法:
1、调整顺序，把真正的用户名放到password的上方(可以跟产品聊聊，如果顺序无所谓的话)

2、禁用掉浏览的自动填充功能

但这个只能依赖于用户，用户不禁用，你也没办法

3、将password拆分到另外一个 form 中，这样，一个form放普通的input，另一个form放password，两个form中的域互不干涉，点击input就不会自动填充了

4、将type改为 text，并且使用 passwordEntry.ttf

@font-face {
 font-family: 'passwordEntry';
 src: url(./passwordEntry.ttf);
}

input {
 font-family: 'passwordEntry'!important;
}

这样password域就会显示定义的passwordEntry这个 font-family，而passwordEntry不是常见的字体，而是把所有的字体全部显示成原点。这样就模拟了密码输入。

PasswordEntry.ttf文件我就不放了，可以自行百度下载，很多，随便找一个免费的就行

ttf的兼容性也十分好

还有几个网上说的方案，我亲测过没有任何效果:
1、autocomplete="off"
截取mdn的解释

大意就是只要是密码框，浏览器总会自动填充。忽略autocomplete属性。
2、autocomplete="new-password"
截取mdn解释

详情参阅 autocomplete mdn