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

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


当前回答

为了防止自动补全,只需设置一个空白作为输入值:

<input type="text" name="name" value="  ">

其他回答

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管理网站的密码,这是一个标准,最终可能会得到普遍支持。

对于这个问题,我使用了这个css解决方案。这对我很有用。

input{
  text-security:disc !important;
  -webkit-text-security:disc !important;
  -moz-text-security:disc !important;
}

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项目。

我找到了一个适合我的解决办法。它没有禁用自动完成,但允许自定义它。在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 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();
    });
});

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