TL;DR

Question

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

http://imgur.com/Rm6X2FI.png - （w / out autofill）

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

几个月前我在网上找到了一个解决方案（参考：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自动填充下拉菜单，而不是自动填充自动填充值的输入字段。

Answer 1

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

TL; DR Google地图代码正在将autocomplete属性更改为off，因此，即使您将其设置为new-password，您也可以＃39 ;仍然会自动填充。我正在使用的黑客是监听该属性的突变然后覆盖它。注意：只需在调用Google地图后更改属性即可。

在初始化Google地图自动填充功能之前设置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']
    });

Answer 2

这也让我完全疯狂。有同样的问题。我们使用脚本来为用户提取字段值以供选择，并且不希望浏览器自动 - 无论如何都要搞砸了。 Chrome似乎是我们可以使用的bugger（最新版本42.0.2311.135 m），Firefox（FF）。

因此，我们还必须处理浏览器的autocomplete和Chrome的autofill。如果我添加：＆lt; form autocomplete =“off”＆gt;在顶部然后它停止FF和Chrome中的自动完成，但不停止Chrome中的AUTOFILL。将'off'更改为'false'对任一浏览器都没有任何作用。解决了FF问题但不解决Chrome问题，因为它显示了丑陋的AUTOFILL框内容。

如果您将每个字段中的autocomplete =“off”再次单独添加，则可以在FF中使用但是对于Chrome中具有此属性自动完成功能的输入字段已关闭，但自动填充功能仍会显示丑陋的脑袋。

现在，奇怪的是，如果您将单个输入字段中的值从“关闭”更改为“假”，那么它似乎会震动Chrome，对于该字段，您将此设置为autocomplete =“false”然后你只能看到自动完成值（如果之前在字段中输入了任何内容），所有其他输入字段都没有显示！您还可以将此值设置为no或xx或其他任何类似于自动填充的无效值上的Chrome barf，并且表单反应奇怪。如果您有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的自动填充功能（您应该能够将隐藏的输入字段放在提交下方的顶部或底部）。添加此＆lt; input autocomplete =“false”name =“hidden”type =“text”style =“display：none;”＆gt;代码：

<!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的自动填充是问题所在。希望这会有所帮助。

Answer 3

jQuery解决方案：

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

Answer 4

我添加了一个 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')
    })
  }

Answer 5

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

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

  }
});

Answer 6

您可以尝试将输入字段的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

Answer 7

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

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

Answer 8

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

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

Answer 9

这只是一个简单的解决方案，不要在名称、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

Answer 10

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

TL;DR

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

详情

几乎所有浏览器都使用字段名称、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 之类的东西可以解决问题。

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

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

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

Answer 11

浏览器-Chrome。

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

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

以及其他直接设置此属性的字段-

autocomplete="new-password"

对我来说，只有这种价值有效。其他任何值和愚蠢的自动填充功能都会使您一团糟。

Answer 12

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

Answer 13

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

在主 autocomplete="off" 元素上使用 <form>
对于字段本身，将 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>

Answer 14

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

Answer 15

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

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

Answer 16

对于那些使用 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

Answer 17

这是唯一适用于我的自动完成和 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>

Answer 18

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

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

Answer 19

您可以通过将地点自动填充<input>字段放置在<form>元素之外（在Chrome 80.0.3987.149中进行测试）来避免使用Chrome自动填充。

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

我建议在<input name="street" type="hidden" />元素中使用<input name="city" type="hidden" />或<form>之类的输入字段，然后在用户从{{之外的地方1}}元素。

Answer 20

以上所有解决方案均不适用于Chrome 78（包括autocomplete =“ new-password”）。但到目前为止，我发现了另一个可行的解决方案：

在初始化Google Maps自动完成之前生成一个随机自动完成（请参阅@Rimmel有关observerHack的答案，只需使用Math.random（）更改“ new-password” ），然后在表单中添加此标记：

<input id="_suburb" type="text" style="display:none;" disabled>

Answer 21

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

Answer 22

这使我发疯，在测试了很多东西之后，为防止这种行为，我所要做的就是没有提示chrome这个地址。

在不提及“地址”，“街道”等字眼的情况下，使其变得用户友好并非易事

我最终在占位符中使用单词“ Location”。我没有使用其他任何属性，例如自动完成功能。只需在任何地方都不要提及地址，Chrome就会停止这样做。

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

Answer 23

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

在这些字符周围放置一个简单的未使用的<form></form>，这可以解决“自动完成”问题。

Answer 24

引用Elmux对以上答案https://angular.io/guide/router的评论：

使用Chrome 71，我从控制台中删除了属性占位符，它会自动运行。如果我更改属性值其他的东西，它也可以。最后，避免使用术语“地址” 在占位符属性中。 – Elmux

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

Answer 25

对我来说，我在运行时在输入框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覆盖了GOOGLES OWN SYSTEM并通过日历位置API的自动完成覆盖自动填充功能！

Answer 26

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

我有2个输入与“ Google地方信息自动完成”相关。单击该字段后，将显示自动填充，其中包含来自自动完成功能的建议。我还设置了一个侦听器，以将输入的“自动完成”属性更改为随机的内容，例如“ no-google-autofill”。在我升级到Chrome 69之前，效果一直很好。

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

Answer 27

解决方法：

$('#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');
        }
    })

Answer 28

我尝试了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
}

Answer 29

对要禁用自动填充的输入字段使用autocomplete =“new-password”。 Google Chrome故意忽略autocomplete =“off | false”，但如果设置为“new-password”，则会忽略自动填充。

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

Answer 30

对于那些使用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']
            });
        }
      };
    };
})();

Answer 31

尝试将此添加到您的css文件中：

.pac-container{
    display:none!important;
}

Chrome自动填充功能涵盖了Google Maps API v3的自动填充功能

31 个答案:

TL;DR

详情

更新的答案

原始答案-解决方法