基本上我们可以摆脱任何文本框的自动完成从chrome, firefox或任何类型的浏览器。这是简单的javascript。

window.onload=function(){                                              
        setTimeout(function(){  
            document.getElementById('username').value = '';
            document.getElementById('password').value = '';
        },100);
    }  

当你的窗口完成加载，100毫秒后，我们的用户名和密码字段的值将被删除。 我认为这是最好的方法做自动完成在所有浏览器(特别是chrome)。

我提出了以下解决方案，查询所有字段的属性autocomplple ="off"，然后将其值设置为一个单独的空间，然后设置一个约200ms的定时器，并将值设置回一个空字符串。

例子:

// hack to prevent auto fill on chrome
var noFill = document.querySelectorAll("input[autocomplete=off]");

noFill.forEach(function(el) {
    el.setAttribute("value", " ");
    setTimeout(function() {
        el.setAttribute("value", "");
    }, 200);
});

我选择200毫秒作为计时器，因为经过一些实验，200毫秒似乎是我的电脑上chrome放弃尝试自动完成字段所需的时间。我很乐意听到其他时间对其他人来说似乎更好。

Autocomplete =off在现代浏览器中基本上被忽略了——主要是由于密码管理器等。

你可以尝试添加这个autocomplete="new-password"，它不是所有浏览器都完全支持，但在一些浏览器上是有效的

现代的方法

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

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

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

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

工作示例

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

<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属性的事情，比如根据元素名称使用选择器，这个解决方案应该是无害的。

好吧，有点晚了，但似乎有一点关于自动补全应该和不应该工作的误解。根据HTML规范，用户代理(在这种情况下Chrome)可以覆盖自动完成:

https://www.w3.org/TR/html5/forms.html#autofilling-form-controls:-the-autocomplete-attribute

A user agent may allow the user to override an element's autofill field name, e.g. to change it from "off" to "on" to allow values to be remembered and prefilled despite the page author's objections, or to always "off", never remembering values. However, user agents should not allow users to trivially override the autofill field name from "off" to "on" or other values, as there are significant security implications for the user if all values are always remembered, regardless of the site's preferences.

所以在Chrome的例子中，开发者基本上说“我们将把这个留给用户来决定他们是否想要自动完成工作。”如果你不想要它，就不要在浏览器中启用它”。

然而，在我看来，这对他们来说似乎有点过于热情了，但事实就是如此。规范还讨论了这样做的潜在安全影响:

The "off" keyword indicates either that the control's input data is particularly sensitive (for example the activation code for a nuclear weapon); or that it is a value that will never be reused (for example a one-time-key for a bank login) and the user will therefore have to explicitly enter the data each time, instead of being able to rely on the UA to prefill the value for him; or that the document provides its own autocomplete mechanism and does not want the user agent to provide autocompletion values.

所以，在经历了和其他人一样的挫折之后，我找到了一个适合我的解决方案。它类似于autocomplete="false"答案。

Mozilla的一篇文章正是针对这个问题:

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

在某些情况下，即使autocomplete属性被设置为关闭，浏览器也会继续建议自动补全值。这种出乎意料的行为可能会让开发人员感到困惑。真正强制不完成的技巧是为属性分配一个随机字符串

所以下面的代码应该可以工作:

autocomplete="nope"

以下每一项也应如此:

autocomplete="false"
autocomplete="foo"
autocomplete="bar"

我看到的问题是浏览器代理可能足够聪明，可以学习自动完成属性，并在下次看到表单时应用它。如果它确实这样做了，我所能看到的解决问题的唯一方法是在生成页面时动态更改自动完成属性值。

值得一提的一点是，许多浏览器会忽略登录字段(用户名和密码)的自动完成设置。正如Mozilla文章所述:

For this reason, many modern browsers do not support autocomplete="off" for login fields. If a site sets autocomplete="off" for a form, and the form includes username and password input fields, then the browser will still offer to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits this page. If a site sets autocomplete="off" for username and password input fields, then the browser will still offer to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits this page. This is the behavior in Firefox (since version 38), Google Chrome (since 34), and Internet Explorer (since version 11).

最后是关于属性是属于form元素还是input元素的一些信息。规范再次给出了答案:

如果省略autocomplete属性，则使用与元素表单所有者的autocomplete属性状态对应的默认值(“on”或“off”)。如果没有表单所有者，则使用值“on”。

所以。把它放在表单上应该适用于所有输入字段。将它放在单个元素上应该只应用于该元素(即使表单上没有)。如果完全没有设置autocomplete，则默认为on。

总结

禁用整个表单的自动完成功能:

<form autocomplete="off" ...>

或者如果你动态地需要这样做:

<form autocomplete="random-string" ...>

禁用单个元素的自动补全功能(无论是否存在表单设置)

<input autocomplete="off" ...>

或者如果你动态地需要这样做:

<input autocomplete="random-string" ...>

请记住，某些用户代理甚至可以覆盖您禁用自动补全的最艰难的尝试。