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

前言

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

• 通过配置属性（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，仍然防止被浏览器检测到
• 以上是个人拙见，如有不对请指出，谢谢！