禁用 Firefox 密码管理器的某些密码输入字段。

Question

我有一个注册表格和一个登录表格。在登录表格中，Firefox默认提供了用户名和密码，这是可以的。但在注册表格中，它也这样做——这没有意义，并且会出现问题，因为密码字段已输入，而“重复密码”字段却没有输入。

有没有办法更改注册表格的HTML，以便Firefox和其他浏览器不会自动填充特定的密码字段?

编辑：我已经找到了许多关于这个主题的问题（和答案），但提出的解决方案（在密码输入字段上设置autocomplete = off ）对我在Firefox上不起作用。我发现了这个解决方案，但它似乎有点丑陋（如果用户输入用户名并按Tab键，则无法使用）。 有人知道更好的方法吗？

- johndodo

---

如果你还没有阅读过的话，这里有一个可能会有用的链接：MDN关于自动完成的文档。 - steveax

谢谢提供链接，但是它并没有帮助到我（我在那里没有看到解决方案）。我是否遗漏了什么？为了明确起见，我无法控制用户的浏览器，只能控制HTML。 - johndodo

@johndodo 你尝试过使用ajax提交的方法吗？ - Maxim Manco

@mmanco：我认为在这种情况下，使用AJAX会过度设计 - 我只想禁用自动完成，而不是重新设计整个表单提交过程。 :) - johndodo

Answer 1

我找到了一个简单优雅的解决方案，而且应该支持跨浏览器。真不敢相信我没想到 - 你只需要在你自己的密码输入框前面再添加一个密码输入框，然后将其隐藏即可:

<input style="display:none" type="password" name="foilautofill"/>
<input type="password" name="notautofilledpassword" />

美丽。 :)

- johndodo

---

以防链接消失，解决方案是将以下内容作为表单中的第一个密码字段：<input style="display:none" type="password" name="foilautofill"/> - primehalo

太棒了，解决得非常好！ - Fran Hurtado

这让我感到难过。接下来呢？浏览器会检测隐藏的输入并跳到下一个吗？ - rr-

Answer 2

在许多用户共享一个计算机并存储敏感信息的情况下，我们需要禁用密码自动填充功能。一开始我尝试了您的“简单而优雅”的隐藏密码解决方案，但是一个聪明的用户向我展示了任何人都可以使用浏览器的开发人员工具来在隐藏字段中以纯文本显示以前用户的自动填充密码。

以下是我安全地禁用密码自动填充的方法。这在Firefox 29和IE8上运行：

---

动态创建密码字段，并在页面加载时将其附加到表单中。给它一个占位符属性。

function createPasswordInput() {
var dynpass = document.createElement("input");
dynpass.setAttribute("type", "password");
dynpass.setAttribute("size", 32);
dynpass.setAttribute("id",   "dynPwElem");

    // placeholder helps prevent password autocomplete
dynpass.setAttribute("placeholder", "Enter password");

// append the password element to the form, in my case an empty table cell
var td = document.getElementById("dynamicTd");
td.appendChild(dynpass);

var rpw = document.getElementById("dynPwElem");
rpw.setAttribute("name", "userPassword");

// Max length starts at only 1, helps prevent autocomplete. 
// Use property maxLength instead of setAttribute to work in IE
rpw.maxLength = "1"; // set the DOM property that has uppercase L

---

将密码元素的maxLength属性设置为1，并附加一个onfocus事件以将maxLength扩展到应有的长度（在我的情况下为32）。

function expandPwLength() {
var rpw = document.getElementById("dynPwElem");
// use property maxLength instead of setAttribute to work in IE
if (rpw.maxLength < 32) {
    rpw.maxLength = 32;
}
} 

// attach focus event to expand the password field length
if (rpw.addEventListener) {
    rpw.addEventListener("focus", expandPwLength, true);
} else {
    rpw.attachEvent("onfocus", expandPwLength); // IE <= 8
}

如果用户在用户ID字段中按下“Enter”键，则使用按键事件侦听器防止表单提交。相反，将插入符号移动到密码字段。

function preventAutocomplete (charCode) {
if (charCode == 13) {
    // instead of autocompleting password, navigate to the password field.
        document.getElementById("dynPwElem").focus();
    }
    }
}

在相同的按键事件监听器中，截断密码元素的自动完成属性。

if (charCode == 13 || charCode == 40) // the Enter key, or the Down-arrow key
    document.forms["loginSubmitForm"].userPassword.autocomplete = "";

在页面加载时使用JavaScript设置整个表单属性"autocomplete"为"off"，而不是在HTML标签中。

document.forms["loginSubmitForm"].autocomplete="off";

- MissHilton

---

这是一个有用而全面的答案！ - WolfeFan

Answer 3

在回答这个问题之前，我已经解决了这个问题，方法与JohnDodo和MissHilton提到的方案一样优雅和安全。在密码输入框之前引入一个不可见的虚拟用户输入字段，并使用JS/JQuery代码填充一个不存在的用户名。Firefox将查找该用户的密码以显示其密码，但当然这会失败。我将其用于我们的“更改密码”页面，并认为Firefox的行为是一个bug。浏览器应该只在存储密码的URL上填写存储的密码，而不是在其他页面上填写。

这是我的jQuery/html代码：

<script language="javascript" type="text/javascript">
    $("#dummyusername").ready(function () {
        $("#dummyusername").val("joe_x_dummy");
    });
</script>

<input style="display:none" type="text" name="dummyusername" id="dummyusername" />
<input type="password" name="oldpassword" ...

- Roland