Javascript 阻止浏览器记住凭据（密码）

在处理任何登录表单后，是否可能阻止浏览器提供记住密码的选项

我知道有人在这里询问和回答，但到目前为止，没有一个答案有效，甚至其中一个建议使用：

autocomplete="off"

但这也不起作用

我使用AngularJS和Jade作为模板引擎（不确定是否相关），有什么方法可以做到这一点吗

如果网站为表单设置了autocomplete=“off”，并且表单包含用户名和密码输入字段，则浏览器仍将提供记住此登录的功能，如果用户同意，浏览器将在用户下次访问此页面时自动填充这些字段

您还应该在输入和表单上设置

autocomplete=“off”

Google Chrome发行说明：

用于自动完成请求的Google Chrome UI会有所不同，这取决于输入元素及其表单上是否将autocomplete设置为off。具体来说，当表单的“自动完成”设置为“关闭”且其输入元素的“自动完成”字段未设置时，如果用户要求对输入元素提供自动填写建议，Chrome可能会显示一条消息，说明“此表单已禁用自动完成功能”。另一方面，如果表单和输入元素都将“自动完成”设置为“关闭”，浏览器将不会显示该消息。因此，对于每个具有自定义自动完成功能的输入，应将“自动完成”设置为“关闭”

---

我建议使用Javascript创建一个随机数。使用隐藏字段将该随机数传递给服务器操作，然后将该随机数合并到“登录”和“密码”字段的名称中

例如（psuedo代码，确切的语法取决于您是否使用PHP、jQuery、纯Javascript等）

var number=Math.random（）；
var login_name='name_'+编号；
var pass_word='pass_'+数字；

您的服务器读取“number”字段，然后使用该字段读取“name_uu”数值和“pass_uu”数值

---

用户是否在浏览器中保存密码无关紧要，因为每次用户登录时，名称和密码字段都会不同

我的问题是，虽然我理解用户无法让浏览器记住密码的“烦恼”，而且我不想完全“禁用”该功能，但有时我只想为某个密码字段禁用该功能。例如，我是一个“重置密码”对话框

我想强制他们重新输入旧密码，然后当然要输入两次新密码

根据我的经验，无论我如何命名“旧”密码输入，它都会自动填充“记忆”密码（无论如何，在Firefox 49.0.1中）。也许这就是我弄错的地方，但它只是填充它，不管这个输入的名称不同于说

login

input字段

我看到的行为基本上是浏览器似乎在说“这个用户记住了这个站点的密码，所以现在只需在每个

input type='password'

框中填入该密码，而不管名称如何。在我看来，这应该基于

name

属性，但对我来说（在我工作过的多个站点上）事实似乎并非如此

我的解决方案：

将此密码字段的颜色设置为与输入背景相同的颜色，以便“密码点”在页面加载时基本不可见

onload

，

onblur

，在超时后，或者按照您的意愿，使用JQuery或JS将该密码字段的值设置为nothing（空白），然后将该字段的颜色设置为应该的颜色

$("#old_password").val('').css('color','black);

---

由于您使用的是AngularJS，因此可以不命名该字段，并通过模型访问其包含的数据：

Login: <input ng-model="login" type="text" />
Password: <input ng-model="password" type="password" autocomplete="off" />

---

在IE10和Chrome54中测试，这篇文章现在有点老了，但自从我找到了一个适合我的解决方案（至少是Chrome56版），我将在这里分享

如果在

输入

中删除

名称

和

密码

属性，则Chrome不会要求保存密码。然后，您只需在提交表单之前按代码添加缺少的属性：

<!-- Do not set "id" and "name" attributes -->
Login: <input type="text">
Password: <input type="password">
<!-- Handle submit action -->
<input type="submit" onclick="login(this)">

---

我希望这会有所帮助。仅在Chrome 56上测试。

我发现Firefox 52.0.2非常有决心记住自动补全值。我尝试了上面建议的几乎所有方法，包括将名称属性更改为随机值。唯一对我有效的方法是将值设置为“在浏览器处理表单后使用Javascript

我的用例是幸运的，因为我不必求助于CSS技巧来防止自动完成表单值的混乱和/或恼人的闪现（如上面@MinnesotaSlim所建议的），因为我的表单在他们单击按钮之前是隐藏的；然后通过引导模式显示。因此（使用jQuery）

---

我想，您可以通过最初隐藏表单，并在文档加载事件中手动覆盖浏览器，然后显示表单来获得相同的效果。

对我来说，唯一可靠的解决方案是在提交表单之前清空用户名和密码输入元素，并将常规按钮的提交按钮替换为onclick处理程序。 注意：我们使用Microsoft MVC，因此需要使用输入的凭据填充ViewModel。因此，我们创建了绑定到模型的隐藏输入元素，并在清空可见输入之前将凭证值复制到这些元素

<form>
<input id="UserName" name="UserName" type="hidden" value="">
<input id="Password" name="Password" type="hidden" value="">
</form>

<input id="boxUsr" name="boxUsr" type="text" value="" autocomplete="off">
<input id="boxPsw" name="boxPsw" type="password" autocomplete="off">
<input type="submit" value="Login" onclick="javascript:submitformforlogin()">

   function submitformforlogin() {
        $("[name='boxPsw'],[name='boxUsr']").attr('readonly','true');
        var psw = document.getElementsByName('boxPsw')[0];
        var usr = document.getElementsByName('boxUsr')[0];
        if (psw.value != "false") {
            $('#Password').val(psw.value);
            $('#UserName').val(usr.value);
            psw.value = "";
            usr.value = "";
            $("form").submit();
        } else
            window.alert("Error!");
    }

函数submitformforlogin（）{
$（“[name='boxPsw']，[name='boxUsr']”）attr（'readonly'，'true'）；
var psw=document.getElementsByName（'boxPsw'）[0]；
var usr=document.getElementsByName（'boxUsr'）[0]；
如果（psw.value！=“假”）{
$（'#Password'）.val（psw.value）；
<!-- Do not set "id" and "name" attributes -->
Login: <input type="text">
Password: <input type="password">
<!-- Handle submit action -->
<input type="submit" onclick="login(this)">

function login(submitButton) {
    var form = submitButton.form;
    // fill input names by code before submitting
    var inputs = $(form).find('input');
    $(inputs[0]).attr('name', 'userName');
    $(inputs[1]).attr('name', 'password');
    form.submit();
}

$('#my-button').on("click",function(){        
   $('#form-login input').val("");
});
// this also works nicely
$('#my-modal').on("show.bs.modal",function(){
    $('#form-login input').val("");
})

<form>
<input id="UserName" name="UserName" type="hidden" value="">
<input id="Password" name="Password" type="hidden" value="">
</form>

<input id="boxUsr" name="boxUsr" type="text" value="" autocomplete="off">
<input id="boxPsw" name="boxPsw" type="password" autocomplete="off">
<input type="submit" value="Login" onclick="javascript:submitformforlogin()">

   function submitformforlogin() {
        $("[name='boxPsw'],[name='boxUsr']").attr('readonly','true');
        var psw = document.getElementsByName('boxPsw')[0];
        var usr = document.getElementsByName('boxUsr')[0];
        if (psw.value != "false") {
            $('#Password').val(psw.value);
            $('#UserName').val(usr.value);
            psw.value = "";
            usr.value = "";
            $("form").submit();
        } else
            window.alert("Error!");
    }