截至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);

[2021年适用于Chrome(v88, 89, 90)， Firefox, Brave, Safari] 旧的答案已经写在这里，将适用于试验和错误，但大多数 他们没有链接到任何官方文件或什么Chrome不得不说这一点 的事。

问题中提到的问题是因为Chrome的自动填充功能，这里是Chrome在这个bug链接中的立场- https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164

简单地说，有两种情况-

[CASE 1]: Your input type is something other than password. In this case, the solution is simple, and has three steps. Add name attribute to input name should not start with a value like email or username, otherwise Chrome still ends up showing the dropdown. For example, name="emailToDelete" shows the dropdown, but name="to-delete-email" doesn't. Same applies for autocomplete attribute. Add autocomplete attribute, and add a value which is meaningful for you, like new-field-name It will look like this, and you won't see the autofill for this input again for the rest of your life - <input type="text/number/something-other-than-password" name="x-field-1" autocomplete="new-field-1" /> [CASE 2]: input type is password Well, in this case, irrespective of your trials, Chrome will show you the dropdown to manage passwords / use an already existing password. Firefox will also do something similar, and same will be the case with all other major browsers. [1] In this case, if you really want to stop the user from seeing the dropdown to manage passwords / see a securely generated password, you will have to play around with JS to switch input type, as mentioned in the other answers of this question.

[1]关于关闭自动补全的详细MDN文档- https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

我发现了一个窍门:

<input type="password" id="some_id" name="some_name" value=" " placeholder="Password">

<script>
 $(function)
 {
    $("#some_id").val("");
 }
</script>

注意，value是空格。它防止自动堆积在Chrome和输入字段显示占位符。

除了给它一个自动补全的假字段外，所有的解决方案都不起作用。我做了一个React组件来解决这个问题。

import React from 'react'

// Google Chrome stubbornly refuses to respect the autocomplete="off" HTML attribute so
// we have to give it a "fake" field for it to autocomplete that never gets "used".

const DontBeEvil = () => (
  <div style={{ display: 'none' }}>
    <input type="text" name="username" />
    <input type="password" name="password" />
  </div>
)

export default DontBeEvil

我刚刚更新到Chrome 49和迪奥戈Cid的解决方案不再工作了。

我做了一个不同的工作，在页面加载后在运行时隐藏和删除字段。

Chrome现在忽略了最初的解决方案应用凭据到第一个显示的类型=“密码”字段和它之前的类型=“文本”字段，所以我已经隐藏了两个字段使用CSS可见性:

<!-- HTML -->
<form>
    <!-- Fake fields -->
    <input class="chromeHack-autocomplete">
    <input type="password" class="chromeHack-autocomplete">

    <input type="text" placeholder="e-mail" autocomplete="off" />
    <input type="password" placeholder="Password" autocomplete="off" />
</form>

<!-- CSS -->
.chromeHack-autocomplete {
    height: 0px !important;
    width: 0px !important;
    opacity: 0 !important;
    padding: 0 !important; margin: 0 !important;
}

<!--JavaScript (jQuery) -->
jQuery(window).load(function() {
    $(".chromeHack-autocomplete").delay(100).hide(0, function() {
        $(this).remove();
    });
});

我知道这看起来不是很优雅，但很有效。

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

不是密码，但应该隐藏的字段，例如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">

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

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