在Chrome 63中停用自动填充功能

时间：2017-12-12 14:30:38

标签： html google-chrome

我刚刚将浏览器更新为Chrome版本63.0.3239.84（官方版本）（64位）。

然后我继续浏览我的网站，在那里我有一个带autocomplete='off'的输入框，但我仍然得到以下内容：

enter image description here

（你可以在下方看到我内置的建议下拉列表）

以前从未如此。没有其他改变了！

为什么会这样？这是新版Chrome中的错误吗？我已尝试过所有其他建议，例如autocomplete="false"或将autocomplete = off应用于表单。我甚至试图在页面加载后用jquery应用这些，但也没有运气。

我已经在不同操作系统上使用最新版本的chrome在多台机器上进行了测试。这个问题仍然存在。

15 个答案:

答案 0 :(得分：41)

2018年2月更新：

感谢@JamesNisbet在评论中指出这一点。

根据Chrome team，autocomplete =“off”和autocomplete =“false”将被忽略。这不是Chrome中的暂时回归。

Chrome会尝试自动填充WHATWG standard on autocomplete后面的任何表单字段。除了一个例外，它们忽略“off”和“false”值。

总之，要禁用自动填充，请使用autocomplete属性，其值不在WHATWG列表中。

说明为什么您认为Chrome this Chromium thread中不应忽略autocomplete =“off”的原因。

在Chrome 63中看起来可能是回归。在Chrome的原始自动填充文档中：

  

过去，许多开发人员会在表单字段中添加autocomplete =“off”，以防止浏览器执行任何类型的自动完成功能。虽然Chrome仍然会将此标记视为自动填充数据，但它不会将其视为自动填充数据。那么什么时候应该使用autocomplete =“off”？一个例子是你为搜索实现了自己的自动完成版本。

https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

他们确实区分了自动填充和自动填充，但不清楚它们是不同的。

Chrome，Safari和Edge都在尝试实施自动填充，但没有明确的标准。他们查看name属性而不是显式的标准化属性。

现在autocomplete="something-new"是一个很好的解决方法，虽然在语法上它没有任何意义。这似乎有效，因为浏览器无法理解它。

答案 1 :(得分：22)

我们尝试了autocomplete =＆＃34; false＆＃34;并且自动完成=＆＃34;关闭＆＃34;，都不起作用。但Chrome无法理解的内容，例如autocomplete =＆＃34; disabled＆＃34;，似乎确实有效。奇怪！

更新：从Chrome 72开始运行。

答案 2 :(得分：12)

2019 从Chrome 72开始，autocomplete="disabled"似乎再次有效。

由于很多人在没有阅读评论的情况下没有下载： 在2018年的CHROME中没有更长时间的工作/ CHROME 63 + 相关：https://bugs.chromium.org/p/chromium/issues/detail?id=587466

使用autocomplete =“false”而不是autocomplete =“off”有效，您可以从Chrome小组了解更多信息，了解他们为什么这样做

这里：

https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands https://bugs.chromium.org/p/chromium/issues/detail?id=468153 https://groups.google.com/a/chromium.org/forum/#!topic/chromium-dev/zhhj7hCip5c https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

答案 3 :(得分：6)

我已经设法在Chrome版本65.0.3325.162（官方版本）（64位）中获得了“hack”。

我必须渲染一个输入字段 - 隐藏所以它不会影响我的页面：

<input style="display:none;"/>

然后我渲染我的密码输入字段：

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

所以我的表格最终看起来像：

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

重要的是，您无法在密码类型输入元素中添加名称或ID属性，并且必须具有autocomplete =“new-password”

答案 4 :(得分：4)

在Chrome 63之后，看起来他们将其更改为自动完成=＆＃34;已停用＆＃34;

我建议您使用浏览器检测库，其余部分使用autocomplete =＆＃34; off＆＃34;

答案 5 :(得分：1)

看起来chrome会在输入中查找最接近的“label”html标记，并分析标签的值/ html以影响输入的自动填充。

我发现禁用输入自动填充的最简洁的解决方法是：

<label for="">Country</label>
<label for="" style="display: none;">hidden label to mislead chrome autocomplete</label>
<input ... />

答案 6 :(得分：1)

对于Angular用户，由于autocomplete = 'off'忽略了新的Chrome版本，因此Chrome开发人员建议autocomplete= 'false | random-string'，因此Google Chrome /现代浏览器有2种类型的用户帮助 -

  
      
  1. autocomplete ='off'（可以阻止上次缓存的建议）。
    2.   
  2. autocomplete ='false | random-string'（这会阻止自动填充设置，因为浏览器不知道'random-string'。）
    3.   

那么该怎么办，如果禁用这两个恼人的建议？这是诀窍： -

在每个输入字段中添加autocomplete = 'off'。 （或简单的Jquery）。

$("input").attr('autocomplete', 'off');

从HTML代码中删除<form name='form-name'>代码，并在ng-form = 'form-name'容器中添加<div>。添加ng-form="form-name"也会保留所有验证。

答案 7 :(得分：1)

由于Chrome永远无法正常工作和/或不断改变主意（我知道这不是人类），确保自动填充/自动填充停止的最简单解决方案是对您不希望自动填充的所有输入执行以下操作：

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

答案 8 :(得分：0)

使用JQuery的当前工作解决方案：

从输入中删除了名称和ID我不想自动填充并添加了识别类。然后我创建了一个隐藏输入，其中包含我想要的字段名称和ID。然后在表单提交中，我将字段中的值复制到没有id和没有名称（通过我的标识类找到它），进入带有名称和id的隐藏字段。

HTML 

<form id="myform">
    <input class="identifyingclass" value="">
    <input class="hidden" id="city" name="city" value="">
    <button type="submit">Submit</button>
</form>

的Javascript 

$('#myform').on('submit', function(e) {
     $("#city").val($('.identifyingclass').val());
});

我认为这应该可行，因为我没有看到自动填充锁定除了id或名称以外的任何内容。

答案 9 :(得分：0)

尝试删除＆＃34; Id＆＃34;输入。

我是如何修理它的。

答案 10 :(得分：0)

我通过用

替换有问题的输入元素在我的网站上修复了这个问题 
<p class="input" contenteditable="true">&nbsp;</p>

并使用jQuery在提交之前填充隐藏字段。

但是，这是一个非常糟糕的黑客攻击，因为Chromium做出了错误的决定。

答案 11 :(得分：0)

我通常这样做是为了隐藏自动填充图标：

<div style="width: 0; overflow:hidden;">
    <input type="text" />
</div>

由于Chrome会将自动填充图标放在第一个可写文本字段上，因此该图标将显示在隐藏的输入字段上。

注意：输入字段为隐藏类型或将其显示设置为“无”＆＃39;似乎不起作用。

答案 12 :(得分：0)

autocomplete="off"在当前的Chrome 68和Chrome 63中均可使用。

Demo。

答案 13 :(得分：0)

我很难过，不同的浏览器如何在同一功能中使用不同的选项。

如果是Chrome浏览器，请使用autocomplete =“ disabled”来处理自动填充和基于地址的自动填充（两件事）：

element.autocomplete = isGoogleChrome() ? 'disabled' :  'off';

您可以从此处获得有关如何编写isGoogleChrome（）的一些见识

JavaScript: How to find out if the user browser is Chrome?

答案 14 :(得分：-1)

我能找到的每个答案都不适合我。关于我的情况最令人恼火的部分是Android如何使用登录名填充notes字段，从而导致将错误的注释输入到数据库中。

我想到输入文字输入如何清除Android自动填充功能以及下面的技巧。请注意，只是清除值不会删除自动完成，我必须设置字段的值。设置值后立即清除值也不起作用。 Android Chrome需要延迟才能查看更改并删除填充值。

奖励：在notes字段上执行此操作会导致Android清空表单中的其他自动填充元素。 

<script src="/js/jquery-1.12.1.min.js"></script>
<script>
    $(function () {
        $('#notes').val('--');
        setTimeout(
            function(){ $('#notes').val(''); }
            , 2000
        );
    });
</script>
<input type='text' id='notes' name='notes' maxlength='250' size='17'>

函数setTimeout( callback, msec )是javascript，因此程序员可以在不使用jQuery的情况下实现它。

相关问题
最新问题