Chrome自动填充功能涵盖Google Maps API v3的自动完成功能
我正在使用Google Maps Javascript v3在HTML输入字段上设置自动完成功能，如下所示：
http://imgur.com/Rm6X2FI.png - （不带自动填充功能）
我遇到的问题是，Chrome的自动填充功能会像这样覆盖地图自动完成功能：
http://imgur.com/7a2QM7L.png - （带自动填充）
几个月前我在网上发现了一个解决方案（参考：禁用Chrome自动填充），但似乎这个解决方案不再有任何效果。
<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地图自动填充列表之上吗？
谢谢！
编辑：停止谷歌铬自动填充输入不提供解决我当前的问题。 问题在于输入栏中的Chrome自动填充下拉菜单，而不是自动填充自动填充值的输入栏。
这也让我完全疯了。 有同样的问题。 我们使用脚本来提取字段值供用户选择，并且不希望浏览器的自动 - 无论如何搞砸了。 Chrome似乎是bugger（最新版本42.0.2311.135米），我们可以使用Firefox（FF）。
所以，我们必须处理浏览器的自动填充和Chrome的自动填充功能。 如果我在顶部添加：<form autocomplete =“off”>，那么它会停止FF和Chrome中的自动完成，但不会在Chrome中执行AUTOFILL。 将“关闭”更改为“假”对任何浏览器都不起作用。 解决了FF问题，但不是Chrome，因为它显示了内容上的丑陋AUTOFILL框。
如果您为每个字段单独添加autocomplete =“off”，则会再次在FF中工作，但对于具有此属性的输入字段，Chrome中的自动完成功能处于关闭状态，但自动填充仍会增加其丑陋的头部。
现在，奇怪的是，如果您将单个输入字段中的值从“off”更改为“false”，那么它似乎会将Chrome调高，并且对于设置为autocomplete =“false”的字段，您只能看到自动完成值（如果有任何内容在前面输入）和所有其他输入字段都不显示！ 您也可以将此值设置为no或xx或其他任何值，并且对于自动填充的无效值而言，Chrome barfs看起来很像Chrome表单，并且表单的反应很奇怪。 如果您有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>
我的解决方案关闭了自动填充和Chrome的自动填充功能（您应该能够将隐藏的输入字段放在提交下方的顶部或底部）。 将下面的代码添加到<input autocomplete =“false”name =“hidden”type =“text”style =“display：none;”>
<!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的自动填充是问题所在。 希望这可以帮助。
以上答案都不适用于我（Chrome 64.0.3282.186，x64窗口）。
TL; DR： Google地图代码正在将autocomplete属性更改为off ，因此即使您将其设置为new-password ，您仍然会自动填充。 我使用的黑客是听取该属性的突变，然后重写它。 注意：在拨入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']
});
对于那些使用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']
});
}
};
};
})();
上一篇: Chrome Autofill covers Autocomplete for Google Maps API v3