我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89),这在所有浏览器中都很有效。

尽管输入字段和表单字段都有autocomplete="off"属性,Chrome坚持显示该字段以前条目的下拉历史,这是删除标签框列表。


当前回答

2021答: 可悲的是,唯一有效的东西都是令人作呕的俗气。我的解决方案是在生成前端标记时,在name属性的末尾添加一个动态生成的随机数(例如<input name="postcode-22643"…)这对浏览器来说是一种欺骗。

然后需要在服务器端添加一些东西来清理传入的post请求。例如,在NodeJS / Express中,我放入了一个中间件,并使用了一些正则表达式来从收到的post请求中删除数字段。我的是这样的,但我想在其他语言中也会有类似的东西:

const cleanseAutosuggest = function (req, res, next) {
   for (const key in req.body) {
      if (key.match(/-\d+/)) {
         req.body[key.replace(/-\d+/, "")] = req.body[key];
         delete req.body[key];
      }
   }
   next();
};

app.post("/submit", cleanseAutosuggest, function (req, res, next) {
...
})

其他回答

我刚刚更新到Chrome 49和迪奥戈Cid的解决方案不再工作了。

我做了一个不同的工作,在页面加载后在运行时隐藏和删除字段。

Chrome现在忽略了最初的解决方案应用凭据到第一个显示的类型=“密码”字段和它之前的类型=“文本”字段,所以我已经隐藏了两个字段使用CSS可见性:

<!-- HTML -->
<form>
    <!-- Fake fields -->
    <input class="chromeHack-autocomplete">
    <input type="password" class="chromeHack-autocomplete">

    <input type="text" placeholder="e-mail" autocomplete="off" />
    <input type="password" placeholder="Password" autocomplete="off" />
</form>

<!-- CSS -->
.chromeHack-autocomplete {
    height: 0px !important;
    width: 0px !important;
    opacity: 0 !important;
    padding: 0 !important; margin: 0 !important;
}

<!--JavaScript (jQuery) -->
jQuery(window).load(function() {
    $(".chromeHack-autocomplete").delay(100).hide(0, function() {
        $(this).remove();
    });
});

我知道这看起来不是很优雅,但很有效。

我发布这个答案是为了给这个问题带来一个更新的解决方案。 我目前使用的是Chrome 49,没有给出的答案。 我也在寻找一个解决方案与其他浏览器和以前的版本。

把这些代码放在表单的开头

<div style="display: none;">
    <input type="text" autocomplete="new-password">
    <input type="password" autocomplete="new-password">
</div>

然后,对于您的真实密码字段,使用

<input type="password" name="password" autocomplete="new-password">

如果这不再工作,或如果您遇到其他浏览器或版本的问题,请注释此答案。

批准:

Chrome浏览器:49 Firefox: 44,45 边缘:25 Internet Explorer: 11

我发现这个解决方案是最合适的:

function clearChromeAutocomplete()
{
// not possible, let's try: 
if (navigator.userAgent.toLowerCase().indexOf('chrome') >= 0) 
{
document.getElementById('adminForm').setAttribute('autocomplete', 'off'); 
setTimeout(function () {
        document.getElementById('adminForm').setAttribute('autocomplete', 'on'); 
}, 1500);
}
}

它必须在dom就绪后加载,或者在表单呈现后加载。

看起来这是固定的!参见https://codereview.chromium.org/1473733008

浏览器不关心自动完成=关闭自动,甚至填充凭据到错误的文本字段?

我通过将密码字段设置为只读并激活它来修复它,当用户单击进入它或使用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.