本文共 1316 字，大约阅读时间需要 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浏览器下仍有优化空间。