我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89),这在所有浏览器中都很有效。
尽管输入字段和表单字段都有autocomplete="off"属性,Chrome坚持显示该字段以前条目的下拉历史,这是删除标签框列表。
我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89),这在所有浏览器中都很有效。
尽管输入字段和表单字段都有autocomplete="off"属性,Chrome坚持显示该字段以前条目的下拉历史,这是删除标签框列表。
当前回答
在Chrome 48+使用这个解决方案:
Put fake fields before real fields: <form autocomplete="off"> <input name="fake_email" class="visually-hidden" type="text"> <input name="fake_password" class="visually-hidden" type="password"> <input autocomplete="off" name="email" type="text"> <input autocomplete="off" name="password" type="password"> </form> Hide fake fields: .visually-hidden { margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); position: absolute; } You did it!
同样,这也适用于旧版本。
其他回答
隐藏的输入元素技巧似乎仍然有效(Chrome 43),以防止自动填充,但要记住的一件事是Chrome将尝试基于占位符标记自动填充。您需要将隐藏输入元素的占位符与您试图禁用的输入的占位符匹配。
在我的情况下,我有一个字段的占位符文本“城市或Zip”,我正在使用谷歌地方自动完成。它似乎试图自动填写,就好像它是一个地址表单的一部分。直到我在隐藏元素上放置了与实际输入相同的占位符,这个技巧才起作用:
<input style="display:none;" type="text" placeholder="City or Zip" />
<input autocomplete="off" type="text" placeholder="City or Zip" />
我找到了一个适合我的解决办法。它没有禁用自动完成,但允许自定义它。在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;
}
一些2020年底更新。我尝试了不同网站上的所有老方法。没有一个成功!: - ( 然后我发现了这个: 使用
<input type="search"/>
自动补全功能消失了!
Chrome 86, FireFox, Edge 87都成功了。
这些方法都不再工作,chrome忽略所有这些属性,唯一的解决方案是使用jquery
在输入上使用这个
< onclick输入=“$”.removeAttr(readonly);attr(“readonly”,true);“readonly />
我不得不在drupal页面上用一个巨大的webform来解决这个问题。因为我不能编辑每个输入的html代码,所以我想出了下面的通用jQuery解决方案。
<script>
// Form Autocomplete FIX
function is_mobile() {
if( screen.width < 500 || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) ) {
return true;
}
return false;
}
jQuery( 'input[autocomplete="off"]' ).each( function() {
if( is_mobile() ) {
return;
}
jQuery( this ).attr( 'readonly', true );
} );
jQuery( 'input[autocomplete="off"]' ).focus( function() {
if( is_mobile() ) {
return;
}
jQuery( this ).removeAttr( 'readonly' );
jQuery( this ).focus();
} );
jQuery( 'input[autocomplete="off"]' ).blur( function() {
if( is_mobile() ) {
return;
}
jQuery( this ).attr( 'readonly', true );
} );
</script>
浏览器检测从这里开始。
我想有可能优化这段代码(我很想获得一些建议),但您将从中获得想法。