我创建了一个使用标签框下拉的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) {
...
})

其他回答

我用另一种方法解决了。你可以试试这个。

<input id="passfld" type="text" autocomplete="off" />
<script type="text/javascript">
// Using jQuery
$(function(){                                               
    setTimeout(function(){
        $("input#passfld").attr("type","password");
    },10);
});


// or in pure javascript
 window.onload=function(){                                              
    setTimeout(function(){  
        document.getElementById('passfld').type = 'password';
    },10);
  }   
</script>

现代的方法

简单地使你的输入为只读,然后聚焦,删除它。这是一种非常简单的方法,浏览器不会填充只读输入。因此,此方法被接受,并且永远不会被将来的浏览器更新覆盖。

<input type="text" onfocus="this.removeAttribute('readonly');" readonly />

下一部分是可选的。相应地设置输入样式,使其看起来不像只读输入。

input[readonly] {
     cursor: text;
     background-color: #fff;
}

工作示例

截至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似乎忽略了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>的顶部,该情况得到解决。

快速破解,如果你读了上面的答案仍然得到自动补全,你可以试试这个。给出随机字符串将删除自动补全。

<input autocomplete="somerandomstring" or autocomplete="disabled">

我不知道这方法对不对,它就是对我有用。