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

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


当前回答

Autocomplete =off在现代浏览器中基本上被忽略了——主要是由于密码管理器等。

你可以尝试添加这个autocomplete="new-password",它不是所有浏览器都完全支持,但在一些浏览器上是有效的

其他回答

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

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

虽然我同意自动补全应该是用户的选择,但有时Chrome对它过于热心(其他浏览器可能也是如此)。例如,具有不同名称的密码字段仍然自动填充已保存的密码,而前一个字段仍然填充用户名。当表单是web应用程序的用户管理表单,而你不想自动填充以填充你自己的凭证时,这尤其糟糕。

Chrome完全忽略autocomplete="off"现在。虽然JS技巧可能很有效,但我发现了一种简单的方法:

将密码字段的值设置为控制字符8 (PHP中的“\x08”或在HTML)。这将停止Chrome自动填充字段,因为它有一个值,但没有实际的值输入,因为这是退格字符。

是的,这仍然是一个黑客,但它为我工作。YMMV。

在form标签后添加这个:

<form>
<div class="div-form">
<input type="text">
<input type="password" >
</div>

添加到你的css文件:

.div-form{
opacity: 0;
}

截至Chrome 42,这个线程中的解决方案/hacks(截至2015-05-21T12:50:23+00:00)都不能禁用单个字段或整个表单的自动完成。

编辑:我发现你实际上只需要在其他字段之前插入一个虚假的电子邮件字段到你的表单(你可以用display: none隐藏它),以防止自动完成。我假设chrome存储某种形式的签名与每个自动完成字段,包括另一个电子邮件字段破坏这个签名,防止自动完成。

<form action="/login" method="post">
    <input type="email" name="fake_email" style="display:none" aria-hidden="true">
    <input type="email" name="email">
    <input type="password" name="password">
    <input type="submit">
</form>

好消息是,因为“表单签名”被破坏了,所以没有一个字段是自动完成的,所以在提交之前不需要JS来清除假字段。

旧的回答:

我发现唯一可行的方法是在真正的字段之前插入两个电子邮件和密码类型的虚拟字段。你可以将它们设置为display: none来隐藏它们(忽略这些字段是不够聪明的):

<form action="/login" method="post">
    <input type="email" name="fake_email" style="display:none" aria-hidden="true">
    <input type="password" name="fake_password" style="display:none" aria-hidden="true">
    <input type="email" name="email">
    <input type="password" name="password">
    <input type="submit">
</form>

不幸的是,字段必须在表单中(否则两组输入都是自动填充的)。因此,为了真正忽略假字段,你需要在form submit上运行一些JS来清除它们:

form.addEventListener('submit', function() {
    form.elements['fake_email'].value = '';
    form.elements['fake_password'].value = '';
});

从上面可以注意到,用Javascript清除值可以覆盖自动完成。因此,如果失去适当的行为与JS禁用是可以接受的,你可以简化这一切与JS自动完成“polyfill”Chrome:

(function(document) {

    function polyfillAutocomplete(nodes) {

        for(var i = 0, length = nodes.length; i < length; i++) {

            if(nodes[i].getAttribute('autocomplete') === 'off') {

                nodes[i].value = '';
            }
        }
    }

    setTimeout(function() {

        polyfillAutocomplete(document.getElementsByTagName('input'));
        polyfillAutocomplete(document.getElementsByTagName('textarea'));

    }, 1);

})(window.document);

似乎Chrome现在忽略autocomplete="off",除非它是在<form autocomplete="off">标签。