欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-13 09:55:56
...

当网页中表单中,如果有密码项。谷歌浏览器的密码填充机制就会启动,会对页面样式造成一定的影响。
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="请输入密码"  >
相关标签: 密码自动填充