【问题标题】：Chrome Autofill covers Autocomplete for Google Maps API v3Chrome 自动填充功能涵盖 Google Maps API v3 的自动填充功能
【发布时间】：2015-07-08 00:42:19
【问题描述】：

我正在使用 Google Maps Javascript v3 在 HTML 输入字段上设置自动完成功能，如下所示：

http://imgur.com/Rm6X2FI.png -（无自动填充）

我遇到的问题是 Chrome 的自动填充功能像这样掩盖了地图自动填充功能：

http://imgur.com/7a2QM7L.png -（带自动填充）

几个月前我在网上找到了一个解决方案（参考：Disabling Chrome Autofill），但这个解决方案似乎不再有任何效果。

<input type="text" name="address" id="address_fake" autocomplete="off" style="display:none">
<input type="text" name="address" id="address" autocomplete="off" placeholder="Address" />

有什么方法可以阻止 Chrome 的自动填充显示在 Google 地图自动填充列表的顶部？

编辑：Stop Google chrome auto fill the input 没有为我当前的问题提供解决方案。问题在于输入字段上的 Chrome 自动填充下拉菜单，而不是输入字段自动填充自动填充值。

【问题讨论】：

我试过value=""，但在这种情况下没有效果。
我对@987654327@ 大肆宣传，但没有雪茄。
那也没有任何作用。
当，似乎没有什么可以为我解决这个问题。感谢您的帮助！
不用担心。我可能会这样做，尽管我宁愿发现我做错了什么并修复它，而不是发现这是我无法控制的问题。是啊，告诉我吧！我认为 Google 的产品可以无缝协作。

标签： html google-maps google-chrome google-maps-api-3

【解决方案1】：

这也把我逼疯了。有同样的问题。我们使用脚本来提取字段值供用户选择，并且不希望浏览器的 auto-whatever 搞砸了。 Chrome 似乎是我们可以使用的臭虫（最新版本 42.0.2311.135 m）、Firefox (FF)。

因此，我们还必须处理浏览器的autocomplete 和Chrome 的autofill。如果我在顶部添加：

那么它会停止 FF 和 Chrome 中的自动完成，但不会停止 Chrome 中的 AUTOFILL。将 'off' 更改为 'false' 对任何一个浏览器都没有任何作用。解决了 FF 问题，但没有解决 Chrome，因为它在内容上显示了丑陋的 AUTOFILL 框。

如果您再次将 autocomplete="off" 添加到每个字段，则可以在 FF 中使用，但对于具有此属性的输入字段，Chrome 中的自动完成功能已关闭，但自动填充功能仍会保留丑头。

现在，奇怪的是，如果您将单个输入字段中的值从“off”更改为“false”，那么它似乎会震动 Chrome，并且对于该字段，您将其设置为 autocomplete="false" 然后您只会看到 autocomplete 值（如果之前在该字段中输入过任何内容），而所有其他输入字段什么也不显示！您还可以将此值设置为 no 或 xx 或其他任何值，看起来就像 Chrome barfs 对自动完成的无效值和表单的奇怪反应。如果您有 5 个字段并将其设置为第三个字段，则字段 1、2、4 和 5 为空白，但字段 3 显示自动完成。

这是一个供您复制和混淆的示例（尝试将自动完成属性移动到不同的字段，看看它如何反应）：

<!DOCTYPE html>
<html>

<head>
  <title>Signup</title>
</head>

<body>
  <form autocomplete="off" method="post">
    First name:
    <input name="Firstname" type="text">
    <br />Last name:
    <input name="Lastname" type="text" style="width: 124px">
    <br />Address:
    <input autocomplete="false" name="Address" type="text" style="width: 383px">
    <br />Phone number:
    <input name="Phone" type="text">
    <br />E-mail:
    <input name="Email" type="text" style="width: 151px">
    <br />
    <input type="submit">
  </form>
</body>

</html>

我关闭自动完成和 Chrome 的自动填充的解决方案（您应该能够将隐藏的输入字段放在提交下方的顶部或底部）。将此添加到代码中：

<!DOCTYPE html>
<html>

<head>
  <title>Signup</title>
</head>

<body>
  <form autocomplete="off" method="post">
    <input autocomplete="false" name="hidden" type="text" style="display:none;">
    <br />First name:
    <input name="Firstname" type="text">
    <br />Last name:
    <input name="Lastname" type="text" style="width: 124px">
    <br />Address:
    <input name="Address" type="text" style="width: 383px">
    <br />Phone number:
    <input name="Phone" type="text">
    <br />E-mail:
    <input name="Email" type="text" style="width: 151px">
    <br />
    <input type="submit">
  </form>
</body>

</html>

底线：Chrome 确实坚持 autocomplete=off 但 Chrome 的自动填充是问题所在。希望这会有所帮助。

【讨论】：

你是大师。在表单上设置autocomplete="off"，在隐藏输入上设置autocomplete="false"，对我来说就像是一种魅力。谢谢！
谢谢！这一直困扰着我一段时间，而且效果很好。
不，它不起作用，只要你在输入字段附近有一个标签，上面写着“地址”之类的东西，它就会显示那个愚蠢的下拉菜单。
多年后在 Chrome 63 上，这仍然是一个问题:(
此解决方案不起作用。设置autoComplete="false" 适用于常规输入，但在调用new this.props.google.maps.places.Autocomplete 后会中断。

【解决方案2】：

以上答案都不适合我（Chrome 64.0.3282.186，x64 windows）。

TL;DR： Google 地图代码正在将 autocomplete 属性更改为 off，因此即使您将其设置为 new-password，您仍然会获得自动填充。我正在使用的 hack 是侦听该属性的突变，然后覆盖它。注意：调用谷歌地图后简单地改变属性是行不通的。

在初始化 Google Maps Autocomplete 之前设置一个 MutationObserver，它会立即停止侦听突变，然后将属性设置为 new-password。

    var autocompleteInput = document.getElementById("id-of-element");

    var observerHack = new MutationObserver(function() {
        observerHack.disconnect();
        $("#id-of-element").attr("autocomplete", "new-password");
    });

    observerHack.observe(autocompleteInput, {
        attributes: true,
        attributeFilter: ['autocomplete']
    });

【讨论】：

有趣的是，谷歌自己的服务在他们自己的不遵守规范的浏览器上完全被破坏了。很好的解决方法。
observerHack.disconnect() 对我造成了未定义的错误，因此我将其删除并在设置属性之前添加了if (autocompleteInput.getAttribute('autocomplete') !== 'new-password') 检查。
为我工作，但可能需要包括您需要 Jquery 才能使您的解决方案正常工作。
次要修复以消除对 jQuery 的依赖 - 将 $("#id-of-element").attr("autocomplete", "new-password"); 替换为 autocompleteInput.setAttribute("autocomplete", "new-password");
天啊，现在是 2020 年，这种情况仍在发生。 Google Maps JS 库仍在添加这个现在被 Chrome 忽略并导致“双重自动完成”的值。感谢您撰写此答案。

【解决方案3】：

对于那些使用 Angularjs 的人，我创建了一个基于 @Rimmel 答案的指令，该指令在 Chrome 66.0.3359.139 中为我工作。下面是代码：

(function(){
  'use strict'; 
  angular.module('app.directive')
    .directive('stopAutofill', stopAutofillDirective);

  function stopAutofillDirective() {
      return {
        restrict: 'A',
        link: function (scope, element) {
            var observerHack = new MutationObserver(function () {
                observerHack.disconnect();
                element.attr("autocomplete", "new-password");
            });

            observerHack.observe(element[0], {
                attributes: true,
                attributeFilter: ['autocomplete']
            });
        }
      };
    };
})();

【讨论】：

【解决方案4】：

将autocomplete="new-password" 用于您希望禁用自动填充的输入字段。谷歌浏览器有意忽略autocomplete="off | false"，但如果您设置为"new-password"，则它会忽略自动填充。

另外，检查处理自动填充的 Google Places API 方式，理想情况下，这应该是实现的方法： https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

【讨论】：

【解决方案5】：

我尝试了Google's Address Finder 的示例，但遇到了同样的问题：

更新答案

使用 新版 chrome，您只需在输入中添加：autocomplete="off"：

<input id="autocomplete" autocomplete="off" placeholder="Enter your address" onFocus="geolocate()" type="text"/>

原始答案 - 解决方法

这是自动完成输入，其中包含事件：onFocus="geolocate()":

<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"/>

我在地理定位中添加了这一行，以隐藏自动完成功能：

function geolocate() {
    // add this line to hide the autocomplete
    $("#autocomplete").attr("autocomplete", "new-password");

    // other stuff
}

【讨论】：

使用 Chrome 71，我从控制台中删除了属性占位符，它会自动运行。如果我更改其他东西的属性值，它也可以工作。最后，避免在占位符属性中使用术语“地址”。
autocomplete="off" 不适用于最新的 chrome，请参阅此线程 bugs.chromium.org/p/chromium/issues/detail?id=587466
@Lance：您链接的错误来自 2016 年 2 月！你是说，3年后，这还是个问题！？？ autocomplete="off" 对我有用，我正在使用 chrome 71 - 这是截至今天的最新版本。如果这对您不起作用，我建议您仔细检查您的 chrome 版本。
是的，这就是我要说的。在过去的两年中，同一线程中有很多最近的 cmets（投诉！）。如果你去谷歌自己的例子developers.google.com/maps/documentation/javascript/examples/… 你会看到它有 autocomplete=off，但是如果你的设置在 chrome 中设置了保存和填充地址，那么你会得到一个丑陋的提示，在你想要的顶部保存地址。跨度>

【解决方案6】：

jQuery 解决方案：

$('#address').focus(function() {
    $(this).attr('autocomplete', 'new-password');
});

【讨论】：

【解决方案7】：

解决方法：

$('#Name').on('mouseup keyup', function () {
        var val = $('#Name').val();
        val = val.length;
        if (val === 0) {
            $('#Name').attr('autocomplete', 'on');
        }
        else {
            $('#Name').attr('autocomplete', 'new-password');
        }
    }).on('mousedown keydown', function () {
        var val = $('#Name').val();
        var length = val.length;
        if (!length) {
            $('#Name').attr('autocomplete', 'new-password');
        }
    })

【讨论】：

不知道为什么这被否决了......它实际上适用于一般场景（非谷歌地图）。

【解决方案8】：

我设法通过更改输入的占位符为 Chrome 69 解决了这个问题。

我有 2 个输入与 Google 地方信息自动完成相关联。一旦您单击该字段，自动填充就会出现，涵盖来自自动完成的建议。我还设置了一个侦听器，将输入的“自动完成”属性更改为随机的，例如“no-google-autofill”。在我升级到 Chrome 69 之前效果很好。

最终，我通过将输入的占位符从“邮政编码”更改为“区域”来修复它。显然，由于占位符，自动填充被触发。有时 Chrome 会为了自己的利益而试图变得过于聪明。

【讨论】：

对我来说，它是因为name 属性而触发的，并且该线程有报告id 属性的人也可以触发它。将字段的名称/ID 设置为一些随机字符串而不是“地址”对我有用。

【解决方案9】：

对我来说，我在运行时在输入框 ID 和表单字段名称的中间插入了一个字符串，该字符串替换为当前用户会话的会话 ID。会话 ID 尽可能接近每个用户和会话的唯一性。

简而言之，以前称为“cust_address”的字段变成了“cust_a734ohljehgto87y34hpwy9pho3ghseddress”，字段的 ID 也是如此我的输入文本框代码如下所示：

'<input type=text name="cust_a%sessionid%ddress" id="cust_a%sessionid%ddress" value="" autocomplete="new-password">'

为了采取额外的预防措施，我添加了 autocomplete="new-password"，它似乎适用于其他字段，但不适用于地址，尽管它有时确实有效，我还没有弄清楚是什么原因导致它失败或工作（还） ...

当我的用户请求表单时，我将其加载到 PHP 中的一个变量中，并将所有 %sessionid% 实例替换为当前用户会话的会话 ID，然后将其输出到浏览器。

到目前为止，这就像一个魅力，但我的系统仍处于 beta 测试阶段，因此它没有被 Chrome 监控数千个输入，以便 Chrome 找出逻辑并规避它 - 希望他们不要花太多钱规避这些修复的时间，特别是考虑到它是 GOOGLES OWN SYSTEM，它使用自动完成覆盖了日历位置 API 的自动填充功能来覆盖 GOOGLES OWN SYSTEM！

【讨论】：

【解决方案10】：

引用 Elmux 对上述答案 https://stackoverflow.com/a/50927328/1350573 的评论：

在 Chrome 71 中，我从控制台中删除了属性占位符，它会自动工作。如果我更改属性值别的东西，它也有效。最后，避免使用“地址”一词在占位符属性中。 – Elmux

对我（2018 年 12 月 30 日，Chrome 71）来说，这是正确但不直观的答案。

【讨论】：

是的也发现了这个，基本上如果你不想让 chrome 自动填充，那么确保它不能告诉它是一个“地址”字段
对我来说它是由name 属性触发的，解决方法是使用随机字符串作为名称。
我发现它需要删除包含“地址”的id、name 和placeholder attrs

【解决方案11】：

我在同一页面上有用户名和密码字段。

在它们周围放置一个简单的未使用的<form></form>，这样就解决了自动完成问题。

【讨论】：

【解决方案12】：

这让我发疯了，在测试了很多东西之后，为了防止这种行为，我必须做的是不向作为地址的 chrome 提供提示。

在不提及“地址”、“街道”等词的情况下使其用户友好并非易事

我最终在占位符中使用了“位置”一词。我没有使用任何其他属性，例如自动完成。永远不要在任何地方提及它的地址，Chrome 将停止这样做。

我希望这可以帮助其他人。

【讨论】：

【解决方案13】：

感谢GSTAR。我使用了下面的代码而不是 Jquery，这对我有用

&lt;input type="text" value="" id="address" class="form-control" placeholder="Enter a location" autocomplete="new-password" onfocus="this.setAttribute('autocomplete', 'new-password');"&gt;

【讨论】：

我只需要你的 onfocus 事件处理程序让它在 Chrome 83.0.4103.61 中为我工作

【解决方案14】：

<input id="autocomplete" autocomplete="nope" type="text" onFocus="this.setAttribute('autocomplete','nope'); geolocate();">

【讨论】：

【解决方案15】：

浏览器 - Chrome。

对于附加 google api 的输入，将属性自动完成设置为焦点 -

onfocus="this.setAttribute('autocomplete', 'new-password')"

对于其他字段设置此属性直接有效 -

autocomplete="new-password"

对我来说，只有这个值有效。任何其他值和愚蠢的自动填充都会造成混乱。

【讨论】：

【解决方案16】：

通过带有 ES6 的 Google 地图活动...

new google.maps.places.Autocomplete(input);
google.maps.event.addDomListener(input, 'focus', e => e.target.setAttribute('autocomplete', 'new-password'));

【讨论】：

【解决方案17】：

您可以通过将位置自动填充 <input> 字段放在 <form> 元素之外（在 Chrome 80.0.3987.149 中测试）来避免 Chrome 自动填充覆盖。

这当然会在 HTML 的结构和样式方面引入新问题。

我建议在<form> 元素中添加<input name="street" type="hidden" /> 或<input name="city" type="hidden" /> 等输入字段，然后在用户从<form> 元素之外的地点自动完成小部件中选择地址后填写。

【讨论】：

【解决方案18】：

我遇到了同样的问题并使用下面的 jquery 函数解决了它

$( document ).ready(function() {
  if($('#address').length > 0){
    $('#address').on('focus',function() {
        $(this).attr('autocomplete', 'nope');
    });

  }
});

【讨论】：

【解决方案19】：

您可以尝试将输入字段的type 属性更改为search 而不是text。

这将不允许在该特定输入字段上打开自动填充建议。

将此<input type="text" .... /> 更改为<input type="search" ... />

已在 chrome 83 和 safari 13.0.1 上进行了测试。适合我。

参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search

【讨论】：

这个解决方案使用 matInput 对我有用。谢谢
没有其他东西对我有用，但确实如此！

【解决方案20】：

只需使用以下代码，这应该对您有所帮助。它将自动完成属性设置为“new-loc”（您可以添加任何自定义值，例如 new-address 等）。

var input = $("#myaddress");
this.$window.google.maps.event.addDomListener(input[0], 'focusin', e => e.target.setAttribute('autocomplete', 'new-location'));

【讨论】：

【解决方案21】：

    var address1 = document.getElementById("myaddress");
    address1.addEventListener("focus", clearDefaultAutoComplete);
    function clearDefaultAutoComplete() {
        address1.removeAttribute("autocomplete");
        address1.setAttribute("autocomplete", "no");
    }

【讨论】：

欢迎来到 StackOverflow。虽然这段代码可以解决问题，including an explanation 解决问题的方式和原因确实有助于提高帖子的质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提出问题的人。请edit您的回答添加解释并说明适用的限制和假设。

【解决方案22】：

遵循这些最佳实践来实现这一目标：

在主 <form> 元素上使用 autocomplete="off"
对于字段本身，将 autocomplete 放在除 off 之外的任何位置，例如 `autocomplete="no-autocomplete"
使用动态名称创建输入，然后将此值与真实字段一起使用（将真实字段与type="hidden" 属性一起使用。
非常重要：输入type="search" 而不是文本。在大多数情况下，这一步只会解决您的问题。

示例：

 <form autocomplete="off" method="post">
    <input type="hidden" name="original-input-name" id="originalInput">
    <input type="search" id="fakeInput" name="{any_random_name}" onblur="document.getElementById('originalInput').value = this.value">                                             
</form>

【讨论】：

【解决方案23】：

将输入类型设置为 type="search" 对我有用

【讨论】：

-_- 简单得像个笑话。 8 小时研究

【解决方案24】：

我添加了一个 EventListener 用于设置自动完成属性的焦点。为我工作。

const initAutocomplete = () => {
    address = document.getElementById('GPA');
    city = document.getElementById('city');
    zip = document.getElementById('zip');
    autocomplete= new google.maps.places.Autocomplete(address, {
    componentRestrictions: { country: ["de"] },
    fields: ["address_components"],
    types: ["address"],
    });
    
    autocomplete.addListener("place_changed", fillInAddress);
    
    address.addEventListener('focus', () => {
      address.setAttribute('autocomplete', 'new-password')
    })
  }

【讨论】：

【解决方案25】：

我花了几个小时寻找适用于所有浏览器的完美解决方案，终于找到了！

TL;DR

将您的输入字段名称和字段 ID 重命名为不相关的名称，例如 'data_input_field_1'。然后将&#8204; 字符添加到标签中间。这是一个非打印字符，因此您不会看到它，但它会诱使浏览器不将该字段识别为需要自动完成的字段，因此不会显示内置的自动完成小部件！

细节

几乎所有浏览器都使用字段名称、ID、占位符和标签的组合来确定该字段是否属于可以从自动完成中受益的一组地址字段。因此，如果您有一个像<input type="text" id="address" name="street_address"> 这样的字段，几乎所有浏览器都会将该字段解释为地址字段。因此，浏览器将显示其内置的自动完成小部件。梦想是使用属性autocomplete="off" 会起作用，不幸的是，现在大多数浏览器都不服从这个请求。

所以我们需要使用一些技巧来让浏览器不显示内置的自动完成小部件。我们将这样做的方法是欺骗浏览器，使其相信该字段根本不是地址字段。

首先将 id 和 name 属性重命名为不会泄露您正在处理与地址相关的数据的内容。所以不要使用<input type="text" id="city-input" name="city">，而是使用类似的东西<input type="text" id="input-field-3" name="data_input_field_3">。浏览器不知道 data_input_field_3 代表什么。但你知道。

如果可能，不要使用占位符文本，因为大多数浏览器也会考虑到这一点。如果您必须使用占位符文本，那么您必须发挥创意并确保您没有使用任何与地址参数本身相关的词语（例如City）。使用Enter location 之类的东西可以解决问题。

最后一个参数是附加到字段的标签。但是，如果您像我一样，您可能希望保持标签完好无损并向您的用户显示可识别的字段，例如“地址”、“城市”、“州”、“国家”。好吧，好消息：你可以！实现这一点的最佳方法是插入一个零宽度非连接字符&#8204; 作为标签中的第二个字符。所以用<label>C&#8204;ity</label>替换<label>City</label>。这是一个非打印字符，因此您的用户会看到 City，但浏览器会被欺骗看到 C ity 而无法识别该字段！

任务完成！如果一切顺利，浏览器不应再在这些字段上显示内置地址自动完成小部件！

希望这对您的努力有所帮助！

【讨论】：

【解决方案26】：

这只是一个简单的解决方案，不要在名称、ID 和占位符中使用标准的自动完成短语。并添加autocomplete="off"。

所有作品都适用于版本 90.0.4430.212

我使用数据名称而不是名称

<input value="Russia" data-name="country" type="text" placeholder="Write something" autocomplete="off">

在此处查看短语列表：https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

【讨论】：

刚刚在版本 92.0.4515.107 (x86_64) 中测试过，但这里仍然没有骰子。

【解决方案27】：

在 Chrome v 90 上工作：将以下内容放入您的

onfocus="$(this).attr('autocomplete', 'no')"

【讨论】：

【解决方案28】：

对于那些使用 WooCommerce 和“Woocommerce 自动完成结帐地址”插件的用户，我可以通过将此行添加到现有 billing_address_1 字段来解决问题：

var billing_address = document.getElementById("billing_address_1");
  if(billing_address != null){
            billing_address.addEventListener("focus", function( event ) {
                if(navigator.userAgentData?.brands?.some(b => b.brand === 'Google Chrome'))  //<-- Change made starts here!
                {
                    billing_address.setAttribute('autocomplete', 'none')   
                }                                                                           //<-- Change made ends here!
                RpCheckoutAutocomplete.method.setAutocompleteCountry()
            }, true);
        }

这一行到 shipping_address_1 字段：

var shipping_address = document.getElementById("shipping_address_1");
        if(shipping_address != null){
            shipping_address.addEventListener("focus", function( event ) {
               if(navigator.userAgentData?.brands?.some(b => b.brand === 'Google Chrome'))  //<-- Change made starts here!
                {
                    shipping_address.setAttribute('autocomplete', 'none')   
                }                                                                           //<-- Change made ends here!
                RpCheckoutAutocomplete_shipping.method.setAutocompleteCountry()
            }, true);
        }

更改位置 -> wp-content/plugins/woo-autocomplete-checkout-address/autocomplete.js

【讨论】：

【解决方案29】：

这是唯一适用于自动完成和 Chrome 的自动填充的解决方案：它在调用 new this.props.google.maps.places.Autocomplete 后也适用

在表单标签上添加 autocomplete="off"。
直接在表单内的输入上设置 autocomplete="none" 和再次将属性设置为焦点。

<form autocomplete="off">
    <input type="text" name="address" id="address" placeholder="Address" autocomplete="none"
        onfocus="this.setAttribute('autocomplete', 'none');"/>
</form>

【讨论】：

【解决方案30】：

对我来说，我只需要像这样在自动完成属性中随机放置一些东西

<input type="text" autocomplete="chromeisstupid"/>

【讨论】：