Chrome自动填充功能涵盖了Google Maps API v3的自动完成功能 [英] Chrome Autofill covers Autocomplete for 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地图自动填充列表的顶部?
停止Google chrome自动填充输入不会提供解决我当前问题的方法.问题在于输入字段上的Chrome自动填充下拉菜单，而不是输入字段会自动填充自动填充值.
这也使我完全发疯.有同样的问题.我们使用脚本为用户拉出字段值以供选择，并且不希望浏览器的自动功能将其弄乱. Chrome似乎是我们可以使用的Firefox(最新版本42.0.2311.135 m)和Firefox(FF).
因此，我们必须处理浏览器的自动完成和Chrome的
如果您分别向字段的每个中添加autocomplete ="off"，则可以再次在FF中使用，但对于具有此属性的自动输入框，Chrome中的autocomplete处于关闭状态，但autofill仍会重新填充丑陋的头. 现在，奇怪的是，如果您将单个输入字段中的值从"off"更改为"false"，那么Chrome似乎会动摇，对于该字段，您将其设置为autocomplete ="false"，然后您只会看到 autocomplete 值(如果之前在该字段中输入了任何内容)，而其他所有输入字段均未显示任何内容！您还可以将此值设置为no或xx或其他值，并且看起来像Chrome barfs上的自动完成无效值，并且表单的响应异常.如果您有5个字段并将其设置为第三个字段，则字段1,2、4和5为空白，但字段3显示为自动完成. 这是一个示例，供您复制和使用(尝试将autocomplete属性移动到其他字段，并查看其如何反应): 我关闭自动完成和 Chrome的自动填充功能的解决方案(您应该能够将隐藏的输入字段放在提交下方的顶部或底部).添加此< input autocomplete ="false" name ="hidden" type ="text" style ="display:none;">代码: 底线:Chrome确实遵守autocomplete = off，但是Chrome的自动填充是问题所在.希望这会有所帮助. I am using Google Maps Javascript v3 to setup autocomplete on an HTML input field like so: http://imgur.com/Rm6X2FI.png - (w/out autofill) The issue I'm having is that Chrome's Autofill covers up the Maps Autocomplete like this: http://imgur.com/7a2QM7L.png - (w/ autofill) I found a solution online a couple of months ago (ref: Disabling Chrome Autofill), but it seems that this solution no longer has any effect. Is there any way I can stop Chrome's Autofill from showing on top of the Google Maps Autocomplete list? EDIT: Stop Google chrome auto fill the input does not provide a solution to my current issue. The issue is with the Chrome Autofill dropdown on the input field, not the input field being automatically filled with an autofill value. This was driving me totally crazy as well. Have the same issue. We use scripting to pull up field values for a user to select from and DO NOT want the browser's auto-whatever to mess this up. Chrome seems to be the bugger (latest version 42.0.2311.135 m), Firefox (FF) we can work with. So, we have to deal with the browser's autocomplete AND Chrome's autofill as well. If I add: <form autocomplete="off"> at the top then it stops the autocomplete in FF and Chrome but not the AUTOFILL in Chrome. Changing 'off' to 'false' does nothing for either browser. Solved the FF issue but not Chrome as it shows the ugly AUTOFILL box over content. If you add autocomplete="off" to each of the fields individually then again, works in FF but for the input fields that have this attribute autocomplete in Chrome is off but the autofill still rears its ugly head. Now, the odd thing is that if you change the value in the individual input field from "off" to "false" then it seems to shake Chrome up and for the field you have this set to autocomplete="false" then you ONLY see the autocomplete values (if anything was entered in the field before) and all the other input fields show nothing! You can also set this value to no or xx or whatever and seems like Chrome barfs on the invalid value for autocomplete and the form reacts strangely. If you have 5 fields and set this for the third field then fields 1,2, 4 and 5 are blank but field 3 shows autocomplete. This is an example for you to copy and mess with (try moving the autocomplete attribute to different fields and see how it reacts) : My solution to turn off both autocomplete and Chrome's autofill (you should be able to put the hidden input field at the top or bottom below the submit). Add this <input autocomplete="false" name="hidden" type="text" style="display:none;"> to the code: Bottom line: Chrome does adhere to the autocomplete=off but the autofill of Chrome is the problem. Hope this helps. 这篇关于Chrome自动填充功能涵盖了Google Maps API v3的自动完成功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！<!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>
<!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>
<input type="text" name="address" id="address_fake" autocomplete="off" style="display:none">
<input type="text" name="address" id="address" autocomplete="off" placeholder="Address" />
<!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>
<!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>
