解决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

  

 

独裁的Google  ， ：）

2、Chrome表单自动填充如何取消(暂时可行的解决办法)