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

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


当前回答

直到上周,以下两种解决方案似乎都适用于Chrome、IE和Firefox。但随着Chrome 48版的发布(仍然是49版),它们不再适用:

表格顶部有以下内容:

<input style="display:none" type="text" name="fakeUsername"/>
<input style="display:none" type="password" name="fakePassword"/>

在密码输入元素中: 自动完成=“关闭”

因此,为了快速解决这个问题,我首先尝试使用一个主要的hack,即最初将密码输入元素设置为禁用,然后在document ready函数中使用setTimeout再次启用它。

setTimeout(function(){$('#PasswordData').prop('disabled', false);}, 50);

但这似乎太疯狂了,我做了更多的搜索,在禁用Chrome自动填充中找到了@tibalts的答案。他的答案是在密码输入中使用autocomplete="new-password",这似乎在所有浏览器上都可以工作(在这个阶段,我保留了上面的修复程序1)。

下面是谷歌Chrome开发者讨论中的链接: https://code.google.com/p/chromium/issues/detail?id=370363#c7

其他回答

看到chrome忽略autocomplete="off",我用一个愚蠢的方法解决它,这是使用“假输入”来欺骗chrome填充它,而不是填充“真实的”一个。

例子:

<input type="text" name="username" style="display:none" value="fake input" /> 
<input type="text" name="username" value="real input"/>

Chrome将填充“假输入”,当提交时,服务器将采取“真实输入”的值。

更新

现在Chrome似乎忽略了style="display: none;"或style="visibility: hidden; "属性。

你可以把它改成这样:

<input style="opacity: 0;position: absolute;">
<input type="password" style="opacity: 0;position: absolute;">

根据我的经验,Chrome只自动完成第一个<input type="password">和前一个<input>。所以我添加了:

<input style="display:none">
<input type="password" style="display:none">

到<form>的顶部,该情况得到解决。

[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

2020 年 3 月

我正面临着这个问题,不幸的是,没有一个解决方案对我有效。所以我用了这个小技巧,效果很好。

<input autocomplete="off" type="password" name="password" id="password" readonly="readonly">

$('#password').on('click', function (event) {
  $('#password').removeAttr('readonly');
  $('#password').focus();
});

$('#password').on('blur', function (event) {
  $('#password').attr('readonly', 'readonly');
});

当你点击密码输入字段,它开始显示建议,但当触发重点输入字段比它不显示建议,所以这就是我如何解决我的问题。

我希望它能帮助到一些人。

防止用户名(或电子邮件)和密码自动完成:

<input type="email" name="email"><!-- Can be type="text" -->
<input type="password" name="password" autocomplete="new-password">

防止自动完成字段(可能不起作用):

<input type="text" name="field" autocomplete="nope">

解释:

Autocomplete仍然适用于<input>,尽管有Autocomplete ="off",但你可以将off更改为随机字符串,如nope。


其他禁用字段自动补全的“解决方案”(这不是正确的方法,但它是有效的):

1.

HTML:

<input type="password" id="some_id" autocomplete="new-password">

JS (onload):

(function() {
    var some_id = document.getElementById('some_id');
    some_id.type = 'text';
    some_id.removeAttribute('autocomplete');
})();

或者使用jQuery:

$(document).ready(function() {
    var some_id = $('#some_id');
    some_id.prop('type', 'text');
    some_id.removeAttr('autocomplete');
});

2.

HTML:

<form id="form"></form>

JS (onload):

(function() {
    var input = document.createElement('INPUT');
    input.type = 'text';
    document.getElementById('form').appendChild(input);
})();

或者使用jQuery:

$(document).ready(function() {
    $('<input>', {
        type: 'text'
    }).appendTo($('#form'));
});

使用jQuery添加多个字段:

function addField(label) { var div = $('<div>'); var input = $('<input>', { type: 'text' }); if(label) { var label = $('<label>', { text: label }); label.append(input); div.append(label); } else { div.append(input); } div.appendTo($('#form')); } $(document).ready(function() { addField(); addField('Field 1: '); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="form"></form>


适用于:

铬:49 + Firefox: 44 +