最近有一项目在360浏览器下面遇到一个超级恶心的问题,客户在用360浏览器登录系统后记住密码,再创建用户账户的时候,浏览器会自动将登录的用户名和密码填充到页面上去,我同事被这个问题困扰了很久。
网上的解决方案了,搜来搜去就那几种,千篇一律,相互抄袭转载,找不到一个真正的解决方案。
例如:
1、 给input增加autocomplete="off"属性,让其不自动写入用户名和密码 (360不吃一套)
2、通过js动态修改input的type属性: <input type="text" id="password" οnfοcus="this.type='password'" /> (IE不支持type属性修改)
3、通过JS 隐藏:
$(function(){
$("#PWD").focus(function(){
$(this).hide();
$("#password").val("").show().css("backgroundColor","#fff").focus();
});
$("#password").blur(function(){
$(this).show().css("backgroundColor","#fff");
$("#PWD").hide();
});
$("#UN").focus(function(){
$(this).hide();
$("#userName").val("").show().css("backgroundColor","#fff").focus();
});
$("#userName").blur(function(){
$(this).show().css("backgroundColor","#fff");
$("#UN").hide();
});
});
遗憾的是这种方法也不靠谱
当然网上还有其它方法,都不行,后来我想了一想,既然360浏览器那么霸道,为什么不反其道而行。你填充,我就让你不知道如何填充。
在你的页面会被填充的密码输入框,前后各加一个隐藏的密码输入框,看看浏览器还会不会填充? 果然,同事加上这个后浏览器不再填充用户名密码了,急速模式,兼容模式,各IE浏览器版本,google浏览器均测试OK,就这么简单。
有时候就是换一种思路,少走一点弯路,问题其实没有你想象的那么复杂。
解决方案:
<input type="password" style="display:none" />
<input type="password" id="txtpwd" runat="server" maxlength="20" />
<input type="password" style="display:none" />