Chrome自动填充覆盖了Google Maps API v3的自动完成功能

Question

Chrome自动填充覆盖了Google Maps API v3的自动完成功能

htmlgoogle-mapsgoogle-chromegoogle-maps-api-3

56

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

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

我遇到的问题是 Chrome 的自动填充会盖住 Maps 自动完成，如下图所示：

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

我几个月前在网上找到了一个解决方案（参考：禁用 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 Maps自动完成列表的上面？

编辑：停止Google Chrome自动填充输入无法解决我的当前问题。该问题出现在Chrome自动填充下拉菜单中的输入字段，而不是自动填充值填充输入字段。

- Cole Waldrip

我尝试过使用 value=""，但在这种情况下它没有效果。 - Cole Waldrip

我对input:-webkit-autofill { display: none; }感到很兴奋，但是却没有成功。 - Cole Waldrip

那也没有任何影响。 - Cole Waldrip

哎呀，似乎没有什么方法可以解决我的问题。感谢你的帮助！ - Cole Waldrip

1

没问题。我可能会这样做，尽管我更愿意发现自己做错了什么并加以修正，而不是发现这是一个我无法控制的问题。是啊，跟我说吧！我原以为谷歌的产品之间可以无缝协作。 - Cole Waldrip

显示剩余3条评论

31个回答

29

这个问题实在让我太疯狂了。我有同样的问题。我们使用脚本来提取用户要选择的字段值，而不想让浏览器自动填充干扰这个过程。Chrome似乎是罪魁祸首（最新版本42.0.2311.135 m），Firefox（FF）可以解决。

所以，我们需要应对浏览器的 autocomplete 和 Chrome的 autofill。如果我在顶部添加：<form autocomplete="off">，那么它会停止在FF和Chrome中自动填充，但并不能阻止Chrome的AUTOFILL。将'off'更改为'false'对任何浏览器都没有影响。解决了FF的问题，但Chrome仍然在内容上显示丑陋的AUTOFILL框。

如果您在每个字段单独添加autocomplete="off"，那么它会在FF中起作用，但对于具有此属性的输入字段，则Chrome仍然会出现AUTOFILL的问题。

现在，奇怪的是，如果你将单个输入字段中的值从“off”更改为“false”，那么它似乎会让Chrome出现问题，并且对于你将其设置为autocomplete =“false”的字段，你只能看到自动完成值（如果之前在该字段中输入了任何内容），而所有其他输入字段都不显示任何内容！您还可以将此值设置为no或xx或其他任何值，似乎Chrome对于autocomplete的无效值会产生反应，并且表单反应异常。如果您有5个字段并将其设置为第三个字段，则字段1、2、4和5为空，但字段3显示自动完成。

这是一个供您复制和操作的示例（尝试将autocomplete属性移动到不同的字段并查看其反应）：

<!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>

我的解决方案是关闭自动完成和谷歌浏览器的自动填充（您应该能够将隐藏输入字段放在提交按钮之上或之下）。将以下内容添加到代码中：。请注意保留HTML标签。

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

- Player 0001

4

你很厉害。在表单上加上autocomplete="off"，并在隐藏的输入框中加上autocomplete="false"对我非常有效。谢谢！ - Cole Waldrip

1

谢谢！这个问题困扰了我一段时间，现在完美解决了。 - Marc

7

不，它不起作用。一旦您在输入框附近有一个标签，比如说“地址”，它就会显示那个愚蠢的下拉菜单。 - Overbryd

3

在Chrome 63上，多年过去了，这仍然是一个问题 :( - chipit24

6

这个解决方案行不通。设置 autoComplete="false" 对于普通输入框有效，但在调用 new this.props.google.maps.places.Autocomplete 后会失效。 - chipit24

显示剩余7条评论

25

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

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

- Noor Muhammad

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

17

jQuery解决方案：

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

- MAX POWER

4

通过 Google Maps 事件与 ES6 ...

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

- Nick B

4

你可以尝试将输入字段的type 属性从text改为search。

这样就不会在该特定输入字段上打开自动填充建议了。

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

已测试通过chrome 83和safari 13.0.1。在我的设备上正常工作。

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

- Saurish Kar

这个解决方案在使用matInput的angular中对我有效。谢谢。 - Joe Alvini

没有其他方法适用于我，但这个方法有效了！ - Scottie

3

在Chrome v 90上工作：将以下内容放入您的<input标签中：

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

- mamislimen

2

引用Elmux在答案https://dev59.com/BV0a5IYBdhLWcg3wzbYU#50927328中的评论：

使用Chrome 71，我从控制台中删除了placeholder属性，它可以自动工作。如果我将属性值更改为其他内容，它也可以工作。最后，请避免在placeholder属性中使用“Address”这个词。- Elmux

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

- Philip Callender

2

是的，我也发现了这一点。如果您不希望Chrome自动填充，请确保它无法识别出它是一个“地址”字段。 - Lance

1

对我来说，它是由name属性触发的，解决方法是使用随机字符串作为名称。 - Paulo Scardine

我发现需要删除包含“地址”的id，name和placeholder属性。 - Ollie Khakwani

2

浏览器 - Chrome。

对于附有 Google API 的输入，请在焦点上设置属性自动完成 -

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

对于其他领域，直接设置此属性即可 -

autocomplete="new-password"

对我来说，只有这个值有效。其他任何值都会让愚蠢的自动填充功能出现问题。

- Ronn Wilder

2

我为焦点设置自动完成属性添加了一个事件监听器。对我来说很有效。

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')
    })
  }

- Sascha Kirstein

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rimmel · Accepted Answer

以上回答都对我无效（Chrome 64.0.3282.186，x64 Windows）。

简单来说：Google Maps代码会将autocomplete属性更改为off，所以即使您将其设置为new-password，也仍将获得自动填充。我正在使用的方法是监听该属性上的变化，然后覆盖它。注意：在调用Google Maps之后简单更改属性是不起作用的。

在初始化Google Maps自动完成之前设置一个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']
    });