我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89),这在所有浏览器中都很有效。
尽管输入字段和表单字段都有autocomplete="off"属性,Chrome坚持显示该字段以前条目的下拉历史,这是删除标签框列表。
我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89),这在所有浏览器中都很有效。
尽管输入字段和表单字段都有autocomplete="off"属性,Chrome坚持显示该字段以前条目的下拉历史,这是删除标签框列表。
当前回答
我刚刚更新到Chrome 49和迪奥戈Cid的解决方案不再工作了。
我做了一个不同的工作,在页面加载后在运行时隐藏和删除字段。
Chrome现在忽略了最初的解决方案应用凭据到第一个显示的类型=“密码”字段和它之前的类型=“文本”字段,所以我已经隐藏了两个字段使用CSS可见性:
<!-- HTML -->
<form>
<!-- Fake fields -->
<input class="chromeHack-autocomplete">
<input type="password" class="chromeHack-autocomplete">
<input type="text" placeholder="e-mail" autocomplete="off" />
<input type="password" placeholder="Password" autocomplete="off" />
</form>
<!-- CSS -->
.chromeHack-autocomplete {
height: 0px !important;
width: 0px !important;
opacity: 0 !important;
padding: 0 !important; margin: 0 !important;
}
<!--JavaScript (jQuery) -->
jQuery(window).load(function() {
$(".chromeHack-autocomplete").delay(100).hide(0, function() {
$(this).remove();
});
});
我知道这看起来不是很优雅,但很有效。
其他回答
我使用Chrome -版本64.0.3282.140(正式版本)(64位),并使用以下代码和表单名称,它适用于我。
<form name="formNameHere">....</form>
<script type="text/javascript">
setTimeout(function(){
document.formNameHere.reset();
},500);
</script>
目前的解决方案是使用type="search"。谷歌不会对输入的搜索类型应用自动填充。
参见:https://twitter.com/Paul_Kinlan/status/596613148985171968
更新04/04/2016:看起来这是固定的!参见http://codereview.chromium.org/1473733008
我发现这个解决方案是最合适的:
function clearChromeAutocomplete()
{
// not possible, let's try:
if (navigator.userAgent.toLowerCase().indexOf('chrome') >= 0)
{
document.getElementById('adminForm').setAttribute('autocomplete', 'off');
setTimeout(function () {
document.getElementById('adminForm').setAttribute('autocomplete', 'on');
}, 1500);
}
}
它必须在dom就绪后加载,或者在表单呈现后加载。
我找到了一个适合我的解决办法。它没有禁用自动完成,但允许自定义它。在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;
}
我在我的表单中的一个搜索字段也有类似的问题。无论是autocomplete= "false"还是autocomplete= "off"都不适合我。结果是,当你有aria-label属性在输入元素是设置为一些像城市或地址或类似的东西,chrome覆盖你所有的设置和显示自动完成无论如何
所以修复我所做的是从aria标签中删除城市部分,并提出一个不同的值。最后自动完成停止显示