更新:08/2022

我设法让自动补全通过包含得到尊重

autocomplete="new-password"

在每个单独的输入元素上。

E.g.

<input id="email" type="email" autocomplete="new-password"/>

我设法禁用了利用这条规则的自动合成:

不是密码，但应该隐藏的字段，例如credit 卡号，也可以有type="password"属性，但应该 包含相关的自动补全属性，例如“cc-number”或 “cc-csc”。 https://www.chromium.org/developers/design-documents/create-amazing-password-forms

<input id="haxed" type="password" autocomplete="cc-number">

然而，随之而来的是巨大的责任:)

不要试图欺骗浏览器密码管理器(或内置于 浏览器，或外部)的设计是为了简化用户体验。 插入假字段，使用错误的自动补全属性或 利用现有密码管理器的弱点 只会让用户感到沮丧。

经过大量的挖掘，我发现Chrome上的自动完成下拉菜单(版本83.0.4103.116)不显示，当我们删除输入标签上的名称和id属性 如。代码如下所示 < div > < span > 如果没有在输入标签上设置名称和id属性，则自动完成关闭工作 < input type = " text " / > < / span > < span > 自动完成将在这里工作，因为id属性已设置 <input id="name" type="text"/> < / span > < / div >

现代的方法

简单地使你的输入为只读，然后聚焦，删除它。这是一种非常简单的方法，浏览器不会填充只读输入。因此，此方法被接受，并且永远不会被将来的浏览器更新覆盖。

<input type="text" onfocus="this.removeAttribute('readonly');" readonly />

下一部分是可选的。相应地设置输入样式，使其看起来不像只读输入。

input[readonly] {
     cursor: text;
     background-color: #fff;
}

工作示例

截至Chrome 42，这个线程中的解决方案/hacks(截至2015-05-21T12:50:23+00:00)都不能禁用单个字段或整个表单的自动完成。

编辑:我发现你实际上只需要在其他字段之前插入一个虚假的电子邮件字段到你的表单(你可以用display: none隐藏它)，以防止自动完成。我假设chrome存储某种形式的签名与每个自动完成字段，包括另一个电子邮件字段破坏这个签名，防止自动完成。

<form action="/login" method="post">
    <input type="email" name="fake_email" style="display:none" aria-hidden="true">
    <input type="email" name="email">
    <input type="password" name="password">
    <input type="submit">
</form>

好消息是，因为“表单签名”被破坏了，所以没有一个字段是自动完成的，所以在提交之前不需要JS来清除假字段。

旧的回答:

我发现唯一可行的方法是在真正的字段之前插入两个电子邮件和密码类型的虚拟字段。你可以将它们设置为display: none来隐藏它们(忽略这些字段是不够聪明的):

<form action="/login" method="post">
    <input type="email" name="fake_email" style="display:none" aria-hidden="true">
    <input type="password" name="fake_password" style="display:none" aria-hidden="true">
    <input type="email" name="email">
    <input type="password" name="password">
    <input type="submit">
</form>

不幸的是，字段必须在表单中(否则两组输入都是自动填充的)。因此，为了真正忽略假字段，你需要在form submit上运行一些JS来清除它们:

form.addEventListener('submit', function() {
    form.elements['fake_email'].value = '';
    form.elements['fake_password'].value = '';
});

从上面可以注意到，用Javascript清除值可以覆盖自动完成。因此，如果失去适当的行为与JS禁用是可以接受的，你可以简化这一切与JS自动完成“polyfill”Chrome:

(function(document) {

    function polyfillAutocomplete(nodes) {

        for(var i = 0, length = nodes.length; i < length; i++) {

            if(nodes[i].getAttribute('autocomplete') === 'off') {

                nodes[i].value = '';
            }
        }
    }

    setTimeout(function() {

        polyfillAutocomplete(document.getElementsByTagName('input'));
        polyfillAutocomplete(document.getElementsByTagName('textarea'));

    }, 1);

})(window.document);

我把这种方法称为大锤方法，但它似乎在我尝试过的所有其他方法都失败的地方起了作用:

<input autocomplete="off" data-autocomplete-ninja="true" name="fa" id="fa" />

注意:输入名称和id属性不应该包含任何会给浏览器提示数据是什么的东西，否则这个解决方案将无法工作。例如，我使用“fa”而不是“FullAddress”。

和下面的脚本页面加载(这个脚本使用JQuery):

$("[data-autocomplete-ninja]").each(function () {
    $(this).focus(function () {
        $(this).data("ninja-name", $(this).attr("name")).attr("name", "");
    }).blur(function () {
        $(this).attr("name", $(this).data("ninja-name"));
    });
});

上面的解决方案应该可以防止浏览器自动填充从其他表单收集的数据，或者从同一表单上以前提交的数据。

基本上，当输入处于焦点中时，我删除了name属性。只要在元素处于焦点时不做任何需要name属性的事情，比如根据元素名称使用选择器，这个解决方案应该是无害的。