我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89)，这在所有浏览器中都很有效。
尽管输入字段和表单字段都有autocomplete="off"属性，Chrome坚持显示该字段以前条目的下拉历史，这是删除标签框列表。
当前回答
我找到了一个适合我的解决办法。它没有禁用自动完成，但允许自定义它。在Chrome 96, Opera 82测试
/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: none;
border-bottom: 1px solid;
-webkit-text-fill-color: #000;
-webkit-box-shadow: 0 0 0 1000px transparent inset;
}
其他回答
2021年9月回答
当我不得不处理这个问题时，唯一稳定的解决方案是在<input>元素中每次呈现网站时为名称和自动完成属性生成一个随机字符串。
下面是一个使用纯JavaScript的简单演示。
Html:
<div>
<h3>Autofill disabled with random string</h3>
<form id="disable-autofill-form">
<div>
<span>First Name</span>
<input type="text" />
</div>
<div>
<span>Last Name</span>
<input type="text" />
</div>
<div>
<span>City</span>
<input type="text" />
</div>
<div>
<span>Street</span>
<input type="text" />
</div>
<div>
<span>Postal Code</span>
<input type="text" />
</div>
</form>
</div>
JavaScript:
const randomString = (Math.random() + 1).toString(36).substring(5);
const disableAutoFillForm = document.getElementById('disable-autofill-form');
const disableAutoFillFormInputs = [
...disableAutoFillForm.getElementsByTagName('input'),
];
disableAutoFillFormInputs.forEach((input) => {
input.setAttribute('autocomplete', randomString);
input.setAttribute('name', randomString);
});
你可以在这里找到一个Stackblitz项目。
自动完成=“关闭”不再工作。
尝试使用一个随机字符串来代替"Off"，例如Autocomplete="NoAutocomplete"
我希望这能有所帮助。
更新
现在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>的顶部，该情况得到解决。
虽然我同意自动补全应该是用户的选择，但有时Chrome对它过于热心(其他浏览器可能也是如此)。例如，具有不同名称的密码字段仍然自动填充已保存的密码，而前一个字段仍然填充用户名。当表单是web应用程序的用户管理表单，而你不想自动填充以填充你自己的凭证时，这尤其糟糕。
Chrome完全忽略autocomplete="off"现在。虽然JS技巧可能很有效，但我发现了一种简单的方法:
将密码字段的值设置为控制字符8 (PHP中的“\x08”或在HTML)。这将停止Chrome自动填充字段，因为它有一个值，但没有实际的值输入，因为这是退格字符。
是的，这仍然是一个黑客，但它为我工作。YMMV。
Chrome一直在改变它在每个版本上处理自动完成的方式，我提出的方式是，使字段只读和onclick/focus使它非只读。试试这个jQuery片段。
jQuery(document).ready(function($){
//======fix for autocomplete
$('input, :input').attr('readonly',true);//readonly all inputs on page load, prevent autofilling on pageload
$('input, :input').on( 'click focus', function(){ //on input click
$('input, :input').attr('readonly',true);//make other fields readonly
$( this ).attr('readonly',false);//but make this field Not readonly
});
//======./fix for autocomplete
});
