我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89),这在所有浏览器中都很有效。
尽管输入字段和表单字段都有autocomplete="off"属性,Chrome坚持显示该字段以前条目的下拉历史,这是删除标签框列表。
我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89),这在所有浏览器中都很有效。
尽管输入字段和表单字段都有autocomplete="off"属性,Chrome坚持显示该字段以前条目的下拉历史,这是删除标签框列表。
当前回答
虽然我同意自动补全应该是用户的选择,但有时Chrome对它过于热心(其他浏览器可能也是如此)。例如,具有不同名称的密码字段仍然自动填充已保存的密码,而前一个字段仍然填充用户名。当表单是web应用程序的用户管理表单,而你不想自动填充以填充你自己的凭证时,这尤其糟糕。
Chrome完全忽略autocomplete="off"现在。虽然JS技巧可能很有效,但我发现了一种简单的方法:
将密码字段的值设置为控制字符8 (PHP中的“\x08”或在HTML)。这将停止Chrome自动填充字段,因为它有一个值,但没有实际的值输入,因为这是退格字符。
是的,这仍然是一个黑客,但它为我工作。YMMV。
其他回答
我有一个非常简单的解决方案,这个问题不需要代码和一个可接受的解决方案。Chrome经常读取输入的标签并自动完成。您可以简单地在标签中插入一个“空”字符。
E.g. <label>Surname</labe>
Becomes: <label>Sur‍name</label>
是“空字符串”的HTML转义字符。
这仍然会显示“姓氏”,但自动完成不会检测字段,并尝试自动完成它。
目前的解决方案是使用type="search"。谷歌不会对输入的搜索类型应用自动填充。
参见:https://twitter.com/Paul_Kinlan/status/596613148985171968
更新04/04/2016:看起来这是固定的!参见http://codereview.chromium.org/1473733008
我不得不在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自动补全问题。所以现在chrome应该为你提供自动完成建议从“数据列表”是空的。请记住,如果输入嵌套在“form”标记中,此解决方案将不起作用。令人惊讶的是,除了这个技巧,其他什么都不管用。
<input type="text" autocomplete="off" list="emptyList" />
<datalist id="emptyList"></datalist>
你可以在这里了解更多关于数据列表的信息: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
考虑到浏览器兼容性,使用它似乎是安全的。
我刚刚尝试了下面的方法,它似乎在Chrome 53上起了作用——当输入密码字段时,它还禁用了“使用密码用于:”下拉菜单。
简单地设置你的密码输入类型为文本,然后添加onfocus处理程序(内联或通过jQuery/vanilla JS)来设置类型为密码:
onfocus="this.setAttribute('type','password')"
或者更好:
onfocus="if(this.getAttribute('type')==='text') this.setAttribute('type','password')"