如何去除浏览器input自动填充效果

今天写登录界面的输入框时输入框时，发现一个问题。

我的登录界面两个输入框的大体代码如下：

<input type="text" name="username" class="input-text" placeholder="username"/>
<input type="password" name="password" class="input-text" placeholder="password"/>

理想的打开登录界面的效果图如下：

如果浏览器保存了表单用户名和密码的话，打开界面的时候效果图如下：

这时候也把浏览器自带的样式取消，百度了一波，最后的解决方案如下：

<input type="text" name="username" AUTOCOMPLETE="off"  class="input-text" placeholder="username"/>
<input type="text" name="password" AUTOCOMPLETE="off"  class="input-text" onfocus="this.type='password'" placeholder="password"/>

主要是这两个属性：AUTOCOMPLETE="off"和type="text" οnfοcus="this.type='password'"。一般的type="text"的input可以采用AUTOCOMPLETE="off"解决。W3C对autocomplete的属性描述如下：

autocomplete 属性规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户  在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项 。

既然type="text"的问题解决了，type="password"的问题其实也可以借鉴它，我们初始化的时候让type="text"，并设置AUTOCOMPLETE="off"，当input聚焦时，把type从text转化为password。一般表单填充只有初始化的时候，只要我们在初始化的时候转化为text就可以解决问题了。

补充（上述方法效果，可以试试以下方法）：

//搜索框
<input type="text" autocomplete="off" >
//下面是额外加的标签
<input type="password" autocomplete="new-password" style="display: none"/>

  autocomplete="off"很有可能不能单独使用，要和autocomplete="new-password"结合起来使用才有效果。

参考文献：

• HTML<input>autocomplete属性
• 禁止浏览器input表单自动填充
• 解决谷歌浏览器（chrome）input标签自动填充数据的问题，亲测有效