我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89)，这在所有浏览器中都很有效。
尽管输入字段和表单字段都有autocomplete="off"属性，Chrome坚持显示该字段以前条目的下拉历史，这是删除标签框列表。
当前回答
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项目。
其他回答
更新
现在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>的顶部，该情况得到解决。
目前的解决方案是使用type="search"。谷歌不会对输入的搜索类型应用自动填充。
参见:https://twitter.com/Paul_Kinlan/status/596613148985171968
更新04/04/2016:看起来这是固定的!参见http://codereview.chromium.org/1473733008
除了给它一个自动补全的假字段外，所有的解决方案都不起作用。我做了一个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版本:45，与表单有密码字段:
jQuery('document').ready(function(){
//For disabling Chrome Autocomplete
jQuery( ":text" ).attr('autocomplete','pre'+Math.random(0,100000000));
});
隐藏的输入元素技巧似乎仍然有效(Chrome 43)，以防止自动填充，但要记住的一件事是Chrome将尝试基于占位符标记自动填充。您需要将隐藏输入元素的占位符与您试图禁用的输入的占位符匹配。
在我的情况下，我有一个字段的占位符文本“城市或Zip”，我正在使用谷歌地方自动完成。它似乎试图自动填写，就好像它是一个地址表单的一部分。直到我在隐藏元素上放置了与实际输入相同的占位符，这个技巧才起作用:
<input style="display:none;" type="text" placeholder="City or Zip" />
<input autocomplete="off" type="text" placeholder="City or Zip" />
