前言
最近接到一个需求：用户在登录时，不让浏览器弹出保存帐号和密码的弹框。针对这个需求，搜了很多资料，大致总结为：
- 通过配置属性（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) {
console.error("Error:" + e);
}
})
});
</script>
总结与注意事项
- 首先使用两个type为text的input，防止被浏览器检测到
- 在密码输入框获取焦点时，type设置为password，使密码达到隐藏效果
- 因为选择用Ajax提交请求，1）form表单的onsubmit返回false；2）拿到form表单的数据后，仍然将type设置为text，仍然防止被浏览器检测到
- 以上是个人拙见，如有不对请指出，谢谢！
