如何禁用谷歌浏览器的自动填充

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/niedewang/article/details/80407149

当网页中表单中，如果有密码项。谷歌浏览器的密码填充机制就会启动，会对页面样式造成一定的影响。
1：如下图，密码会自动补充上，底色会变色

2：其实我们想要达到的效果是

3：关键是他填充的密码，是系统的登录密码，和这块的密码风马牛不相及。

4：经过网络搜索，一般思路是

<input type='text' onfocus="this.type=password">

经过测试，大部分都是好用的，但如果遇到一个表单，弹窗的方式显示的话（表单多次出现），经过测试发现，自动填充仍然会启动

5：经过今天测试，网上搜集，发现下面的方法特别好用

<input type="text" onfocus="this.removeAttribute('readonly');this.type='password'" autocomplete="off" id="setting_sign_psw" placeholder="请输入6位数字"  >
<script>
//弹窗每次完成后执行,清空密码框的值
$('#setting_sign_psw').val('');
$('#setting_sign_psw').attr('readonly','true');
<script>

该方案的解决思路是：

• ：每次启动弹窗，将密码框的初始数据清空，防止密码记忆。
• 窗体加载的时候，将密码框readonly 设置为true,只读状态。自动填充机制无法启动
• 密码框得到焦点的时候，只读窗台去掉掉，代码为

onfocus=”this.removeAttribute(‘readonly’)”

• 关于 autocomplete=”off” ，禁用自动填充。这个属性好像是firefox 发起的，并不是标准属性，所以这块主要是针对ie和获取浏览器生效。谷歌不承认这个属性

6：经过上述方法测试，即便是在弹窗的情况下，谷歌的自动填充也能防止了。暂时没有发现问题，有问题的话，我会继续跟进。

7:最新测试，iphone6s 遇到readonly 有可能会导致，软键盘不能弹出的问题，所以如果在手机端，还是不使用readonly 。建议如下面所示

<input type="text" onfocus="this.type='password'" autocomplete="off" id="setting_sign_psw" placeholder="请输入密码"  >