我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89),这在所有浏览器中都很有效。

尽管输入字段和表单字段都有autocomplete="off"属性,Chrome坚持显示该字段以前条目的下拉历史,这是删除标签框列表。


当前回答

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

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

其他回答

我使用Chrome -版本64.0.3282.140(正式版本)(64位),并使用以下代码和表单名称,它适用于我。

<form name="formNameHere">....</form>
<script type="text/javascript">
    setTimeout(function(){
        document.formNameHere.reset();
    },500);
</script>

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

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

[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

对于这个问题,我使用了这个css解决方案。这对我很有用。

input{
  text-security:disc !important;
  -webkit-text-security:disc !important;
  -moz-text-security:disc !important;
}

不知道为什么这在我的情况下工作,但在chrome我使用autocomplete="none"和chrome停止建议地址为我的文本字段。