解决Chrome上的表单自动填充无法禁用（autocomplete="off"属性失效） - 好文

在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>

热门工具换一换