不让浏览器弹出保存帐号和密码窗口的解决方案

不让浏览器弹出保存帐号和密码窗口的解决方案

前言

最近接到一个需求：用户在登录时，不让浏览器弹出保存帐号和密码的弹框。针对这个需求，搜了很多资料，大致总结为：

• 通过配置属性（autocomplete、disabled等属性）
• 加隐藏域
• 切换input的type
• 通过ajax提交（使用JQuery）

前三种，都测试过，并不是所有的浏览器都可以，比如：Google，Safari，IE是可以的，Firefox就不可以....
第四中是可以的，具体请看以下代码：

HTML

<div><form id="formId" onsubmit="return false" method="post">帐号 <input type=text name="username" value=""><br/>密码 <input type="text" name="password"/><br/><input type="button" id="submitBtn" value="登陆"></form>
</div>

JavaScript

<script type="text/javascript">var pwd = $("input[name='password']");pwd.focus(function () {pwd.attr("type", "password");});$("#submitBtn").click(function () {var data = $("#formId").serialize();pwd.attr("type", "text");pwd.val("");$.ajax({type: "POST",dataType: "json",url: "/users/login",data: data,success: function (e) {console.info("Success:" + e);},error: function (e) {("Error:" + e);}})});
</script>

总结与注意事项

• 首先使用两个type为text的input，防止被浏览器检测到
• 在密码输入框获取焦点时，type设置为password，使密码达到隐藏效果
• 因为选择用Ajax提交请求，1）form表单的onsubmit返回false；2）拿到form表单的数据后，仍然将type设置为text，仍然防止被浏览器检测到
• 以上是个人拙见，如有不对请指出，谢谢！