在Chrome上发现了一个Bug,表单会出现框子变黄,并且一直有自动补全的现象,添加 autocomplete="off"
属性也解决不了问题,如下图:



     
在后台登录和注册表单里,不需要自动补全,不仅会误导用户还会导致安全性的问题,百度了一通,发现这居然是Chrome这个强大的浏览器的历史遗留Bug,至今没有解决,所以手动找到了解决办法,步骤如下:

 1、去除黄色框样式,添加css样式
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset; }
2、在不需要自动补全下拉框的地方加入 autocomplete='new-password'
<div class="form-group"> <input type="text" class="form-control"
name="usr_sno" placeholder="账号" required autocomplete="new-password"> </div>
<div class="form-group help"> <input type="text" class="form-control"
flag="password" name="usr_password" placeholder="密码" required
autocomplete='new-password'> </div>
根据Chromium社区的说法, autocomplete='new-password' 属性可以禁用补全。

3、禁用密码输入框的自动补全

     虽然autocomplete='new-password'
属性可以禁用补全,但实测只有type='text'下有用。而密码输入框改成type='text密码会明文显示,改成type='password'又会导致自动补全下拉框。于是想到在密码表单添加自定义属性flag="password",然后加上这段jQuery代码即可。

     原理就是密码输入框默认为type = text,等用户开始输入时,触发函数改成password,这样用感觉不到变化,密码又不会明文显示。
$(function () { //解决Chrome上出现的密码自动补全(propertychange属性兼容IE)
$("[flag='password']").bind('input propertychange', function(e) { //取消事件的默认动作
e.preventDefault(); $(this).attr("type","password"); }); });
参考资料:

1、 autofill for forms not deactivatable - chromium
<https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7&tdsourcetag=s_pctim_aiomsg>

  



 

独裁的Google  , :)

2、Chrome表单自动填充如何取消(暂时可行的解决办法)
<https://blog.csdn.net/qq_24985631/article/details/53516123>

友情链接
KaDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:637538335
关注微信