我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89),这在所有浏览器中都很有效。
尽管输入字段和表单字段都有autocomplete="off"属性,Chrome坚持显示该字段以前条目的下拉历史,这是删除标签框列表。
我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89),这在所有浏览器中都很有效。
尽管输入字段和表单字段都有autocomplete="off"属性,Chrome坚持显示该字段以前条目的下拉历史,这是删除标签框列表。
当前回答
我已经找到了另一个解决方案-只是用style="-webkit-text-security: disc;"遮住你的autocomplete="off"输入中的字符。 你也可以像下面这样把它添加到你的CSS规则中:
[autocomplete="off"] {
-webkit-text-security: disc;
}
主要目标是从元素中消除type="password"或其他类似的类型属性。
至少在2021年1月24日,这个解决方案是有效的……
其他回答
我不得不在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>
浏览器检测从这里开始。
我想有可能优化这段代码(我很想获得一些建议),但您将从中获得想法。
似乎Chrome现在忽略autocomplete="off",除非它是在<form autocomplete="off">标签。
TL;DR:告诉Chrome这是一个新的密码输入,它不会提供旧的密码作为自动补全建议:
<input type="password" name="password" autocomplete="new-password">
由于设计决定,Autocomplete ="off"不起作用——大量研究表明,如果用户可以将密码存储在浏览器或密码管理器中,他们就会有更长时间和更难破解密码。
自动完成的规范已经改变,现在支持各种值,使登录表单更容易自动完成:
<!-- Auto fills with the username for the site, even though it's email format -->
<input type="email" name="email" autocomplete="username">
<!-- current-password will populate for the matched username input -->
<input type="password" autocomplete="current-password" />
如果你不提供这些Chrome浏览器仍然试图猜测,当它做它忽略autocomplete="off"。
解决方案是密码重置表单也存在自动完成值:
<label>Enter your old password:
<input type="password" autocomplete="current-password" name="pass-old" />
</label>
<label>Enter your new password:
<input type="password" autocomplete="new-password" name="pass-new" />
</label>
<label>Please repeat it to be sure:
<input type="password" autocomplete="new-password" name="pass-repeat" />
</label>
你可以使用autocomplete="new-password"标志告诉Chrome浏览器不要猜测密码,即使它已经为这个网站存储了一个。
Chrome还可以直接使用凭据API管理网站的密码,这是一个标准,最终可能会得到普遍支持。
始终有效的解决方案
我用随机字符的使用解决了谷歌Chrome无休止的战斗。当你总是用随机字符串渲染自动补全时,它永远不会记住任何东西。
<input name="name" type="text" autocomplete="rutjfkde">
希望对其他人有所帮助。
2022年更新:
Chrome做了这个改进:autocomplete="new-password"这将解决它,但我不确定,如果Chrome在一段时间后再次更改为不同的功能。
我在我的表单中的一个搜索字段也有类似的问题。无论是autocomplete= "false"还是autocomplete= "off"都不适合我。结果是,当你有aria-label属性在输入元素是设置为一些像城市或地址或类似的东西,chrome覆盖你所有的设置和显示自动完成无论如何
所以修复我所做的是从aria标签中删除城市部分,并提出一个不同的值。最后自动完成停止显示