本文共 1341 字，大约阅读时间需要 4 分钟。

多种方法实现360浏览器下禁止自动填写用户名密码

开发一个项目时，遇到了一个让人头疼的问题：在登录界面输入用户名密码后，选择记住密码，内容页会自动填写这些信息。而内容页是想建立新的子账户，这问题确实让人感到不爽。

问题出在360浏览器上。虽然在火狐、IE8以上版本等高档浏览器下不会出现这种情况，但在360浏览器下却会出现这个问题。本菜鸟经过了以下尝试：

第一种：取消浏览器的自动填写功能。

很遗憾，这个方法对360毫无反应，效果甚微。作为开发者，不能让所有用户都采取这种操作。

第二种：给输入框添加autocomplete="off"属性。

同样地，360对这个方法免疫不反应。

第三种：通过JS动态修改输入框的type属性。

在360浏览器下，这个方法直接把输入的密码显示出来，效果不理想。另外，IE浏览器对此不支持，进一步证明了这个方法的局限性。

第四种：使用隐藏的input欺骗浏览器。

这次换了个思路，创建了两个看起来一样的输入框。通过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浏览器下可能会有问题，因为IE不支持对input type属性的动态修改。因此，在IE浏览器下，用户仍然会看到真实的密码输入框。

总之，虽然在360浏览器下实现了想要的效果，但在IE浏览器下仍有优化空间。

转载地址：http://bhvfk.baihongyu.com/