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

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


当前回答

我有一个非常简单的解决方案,这个问题不需要代码和一个可接受的解决方案。Chrome经常读取输入的标签并自动完成。您可以简单地在标签中插入一个“空”字符。

E.g. <label>Surname</labe>

Becomes: <label>Sur&#8205;name</label>

‍是“空字符串”的HTML转义字符。

这仍然会显示“姓氏”,但自动完成不会检测字段,并尝试自动完成它。

其他回答

Chrome版本34现在忽略autocomplete=off, 看到这个。

很多关于这是好事还是坏事的讨论?你的观点是什么?

不知道为什么这在我的情况下工作,但在chrome我使用autocomplete="none"和chrome停止建议地址为我的文本字段。

2020 年 3 月

我正面临着这个问题,不幸的是,没有一个解决方案对我有效。所以我用了这个小技巧,效果很好。

<input autocomplete="off" type="password" name="password" id="password" readonly="readonly">

$('#password').on('click', function (event) {
  $('#password').removeAttr('readonly');
  $('#password').focus();
});

$('#password').on('blur', function (event) {
  $('#password').attr('readonly', 'readonly');
});

当你点击密码输入字段,它开始显示建议,但当触发重点输入字段比它不显示建议,所以这就是我如何解决我的问题。

我希望它能帮助到一些人。

截至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);

当使用像jQuery UI的自动完成这样的小部件时,请确保它没有将自动完成属性添加/更改为关闭。在使用它时,我发现这是正确的,并且会破坏您为覆盖任何浏览器字段缓存所做的任何工作。确保拥有唯一的name属性,并在小部件初始化后强制使用唯一的自动完成属性。下面是一些关于如何在你的情况下工作的提示。

<?php $autocomplete = 'off_'.time(); ?>
<script>
   $('#email').autocomplete({
      create: function( event, ui ) {
         $(this).attr('autocomplete','<? echo $autocomplete; ?>');
      },
      source: function (request, response) { //your code here },
      focus: function( event, ui ) { //your code here },
      select: function( event, ui ) { //your code here },
   });
</script>
<input type="email" id="email" name="email_<? echo $autocomplete; ?>" autocomplete="<? echo $autocomplete; ?>" />