解决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，而是个select，只要一获取焦点，就出现 "用户名填充区域"。

那么问题来了，我不想让点击select被填充(由于这真的很恶心)，该怎么作呢？

在我看来，有几下几个方法:
一、调整顺序，把真正的用户名放到password的上方(能够跟产品聊聊，若是顺序无所谓的话)

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

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

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

四、在password上方再新增一个空的input type="text"，并将其隐藏掉