Col*_*rip 39 html google-maps google-chrome google-maps-api-3
我正在使用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自动填充下拉菜单,而不是自动填充自动填充值的输入字段.
Rim*_*mel 49
上述答案都不适合我(Chrome 64.0.3282.186,x64 windows).
TL; DR:谷歌地图代码正在将autocomplete属性更改为off,因此即使您将其设置为new-password,您仍将获得自动填充.我正在使用的黑客是监听该属性的突变然后覆盖它.注意:只需在调用Google地图后更改属性即可.
在初始化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']
});
Pla*_*001 19
这让我完全疯了.有同样的问题.我们使用脚本来为用户提取字段值以供选择,并且不希望浏览器自动 - 无论如何都要搞砸了.Chrome似乎是我们可以使用的bugger(最新版本42.0.2311.135 m),Firefox(FF).
因此,我们还必须处理浏览器的自动完成和Chrome的自动填充.如果我在顶部添加:<form autocomplete ="off">,则会停止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显示自动完成.
这是一个复制和混乱的例子(尝试将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的自动填充是问题所在.希望这可以帮助.
Noo*_*mad 18
感谢GSTAR。我使用了下面的代码而不是 Jquery，这对我有用
<input type="text" value="" id="address" class="form-control" placeholder="Enter a location" autocomplete="new-password" onfocus="this.setAttribute('autocomplete', 'new-password');">jQuery解决方案：
$('#address').focus(function() {
$(this).attr('autocomplete', 'new-password');
});
通过 Google 地图事件 w/ES6...
new google.maps.places.Autocomplete(input);
google.maps.event.addDomListener(input, 'focus', e => e.target.setAttribute('autocomplete', 'new-password'));
| 归档时间： |
|
| 查看次数： |
9468 次 |
| 最近记录： |