我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89),这在所有浏览器中都很有效。
尽管输入字段和表单字段都有autocomplete="off"属性,Chrome坚持显示该字段以前条目的下拉历史,这是删除标签框列表。
我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89),这在所有浏览器中都很有效。
尽管输入字段和表单字段都有autocomplete="off"属性,Chrome坚持显示该字段以前条目的下拉历史,这是删除标签框列表。
当前回答
直到上周,以下两种解决方案似乎都适用于Chrome、IE和Firefox。但随着Chrome 48版的发布(仍然是49版),它们不再适用:
表格顶部有以下内容:
<input style="display:none" type="text" name="fakeUsername"/>
<input style="display:none" type="password" name="fakePassword"/>
在密码输入元素中: 自动完成=“关闭”
因此,为了快速解决这个问题,我首先尝试使用一个主要的hack,即最初将密码输入元素设置为禁用,然后在document ready函数中使用setTimeout再次启用它。
setTimeout(function(){$('#PasswordData').prop('disabled', false);}, 50);
但这似乎太疯狂了,我做了更多的搜索,在禁用Chrome自动填充中找到了@tibalts的答案。他的答案是在密码输入中使用autocomplete="new-password",这似乎在所有浏览器上都可以工作(在这个阶段,我保留了上面的修复程序1)。
下面是谷歌Chrome开发者讨论中的链接: https://code.google.com/p/chromium/issues/detail?id=370363#c7
其他回答
我在我的表单中的一个搜索字段也有类似的问题。无论是autocomplete= "false"还是autocomplete= "off"都不适合我。结果是,当你有aria-label属性在输入元素是设置为一些像城市或地址或类似的东西,chrome覆盖你所有的设置和显示自动完成无论如何
所以修复我所做的是从aria标签中删除城市部分,并提出一个不同的值。最后自动完成停止显示
我找到了一个适合我的解决办法。它没有禁用自动完成,但允许自定义它。在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;
}
经过大量的挖掘,我发现Chrome上的自动完成下拉菜单(版本83.0.4103.116)不显示,当我们删除输入标签上的名称和id属性 如。代码如下所示 < div > < span > 如果没有在输入标签上设置名称和id属性,则自动完成关闭工作 < input type = " text " / > < / span > < span > 自动完成将在这里工作,因为id属性已设置 <input id="name" type="text"/> < / span > < / div >
更新
现在Chrome似乎忽略了style="display: none;"或style="visibility: hidden; "属性。
你可以把它改成这样:
<input style="opacity: 0;position: absolute;">
<input type="password" style="opacity: 0;position: absolute;">
根据我的经验,Chrome只自动完成第一个<input type="password">和前一个<input>。所以我添加了:
<input style="display:none">
<input type="password" style="display:none">
到<form>的顶部,该情况得到解决。
浏览器不关心自动完成=关闭自动,甚至填充凭据到错误的文本字段?
我通过将密码字段设置为只读并激活它来修复它,当用户单击进入它或使用tab键到该字段时。
修复浏览器自动填充:只读和设置可写的焦点(在鼠标点击和标签通过字段)
<input type="password" readonly
onfocus="$(this).removeAttr('readonly');"/>
更新: Mobile Safari在字段中设置光标,但不显示虚拟键盘。新的修复工作像以前一样,但处理虚拟键盘:
<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
this.removeAttribute('readonly');
// fix for mobile safari to show virtual keyboard
this.blur(); this.focus(); }" />
现场演示https://jsfiddle.net/danielsuess/n0scguv6/
/ / UpdateEnd
顺便说一下,更多关于我观察到的信息:
Sometimes I notice this strange behavior on Chrome and Safari, when there are password fields in the same form. I guess, the browser looks for a password field to insert your saved credentials. Then it autofills username into the nearest textlike-input field , that appears prior the password field in DOM (just guessing due to observation). As the browser is the last instance and you can not control it, sometimes even autocomplete=off would not prevent to fill in credentials into wrong fields, but not user or nickname field.