我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89),这在所有浏览器中都很有效。
尽管输入字段和表单字段都有autocomplete="off"属性,Chrome坚持显示该字段以前条目的下拉历史,这是删除标签框列表。
我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89),这在所有浏览器中都很有效。
尽管输入字段和表单字段都有autocomplete="off"属性,Chrome坚持显示该字段以前条目的下拉历史,这是删除标签框列表。
当前回答
看起来这是固定的!参见https://codereview.chromium.org/1473733008
其他回答
看到chrome忽略autocomplete="off",我用一个愚蠢的方法解决它,这是使用“假输入”来欺骗chrome填充它,而不是填充“真实的”一个。
例子:
<input type="text" name="username" style="display:none" value="fake input" />
<input type="text" name="username" value="real input"/>
Chrome将填充“假输入”,当提交时,服务器将采取“真实输入”的值。
Autocomplete =off在现代浏览器中基本上被忽略了——主要是由于密码管理器等。
你可以尝试添加这个autocomplete="new-password",它不是所有浏览器都完全支持,但在一些浏览器上是有效的
我提出了以下解决方案,查询所有字段的属性autocomplple ="off",然后将其值设置为一个单独的空间,然后设置一个约200ms的定时器,并将值设置回一个空字符串。
例子:
// hack to prevent auto fill on chrome
var noFill = document.querySelectorAll("input[autocomplete=off]");
noFill.forEach(function(el) {
el.setAttribute("value", " ");
setTimeout(function() {
el.setAttribute("value", "");
}, 200);
});
我选择200毫秒作为计时器,因为经过一些实验,200毫秒似乎是我的电脑上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项目。
我不得不在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>
浏览器检测从这里开始。
我想有可能优化这段代码(我很想获得一些建议),但您将从中获得想法。