Chrome Autofill covers Autocomplete for Google Maps API v3

Question

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

Answer 1

I tried the sample from Google's Address Finder, and got the same problem:

Updated Answer

With the new version of chrome, all you need is to add: autocomplete="off" to your input:

<input id="autocomplete" autocomplete="off" placeholder="Enter your address" onFocus="geolocate()" type="text"/>

---

Original Answer - Workaround

This is the automcomplete input, which has the event: onFocus="geolocate()":

<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"/>

I added this line to geolocate, to hide the autocomplete:

function geolocate() {
    // add this line to hide the autocomplete
    $("#autocomplete").attr("autocomplete", "new-password");

    // other stuff
}

Answer 2

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

Answer 3

For me, I inserted a string at run time in the middle of the input box ID and form field name that was replaced with the session ID of the current users session. The session ID is as close as anyone can get to unique for every user and session.

In short, what was previously a field called "cust_address" became "cust_a734ohljehgto87y34hpwy9pho3ghseddress" as did the ID of the field My input text box code looked like this:

'<input type=text name="cust_a%sessionid%ddress" id="cust_a%sessionid%ddress" value="" autocomplete="new-password">'

For extra precautions I added the autocomplete="new-password" which seems to work for other fields just not the address allthough it does seem to work on occasion and I havent worked out what causes it to fail or work (yet)...

When my user requests the form, I load it into a variable in PHP and replace all instances of %sessionid% with the session ID of the current user session then output it to the browser.

So far, this has worked like a charm but my system is still in beta testing so it has not had thousands of inputs monitored by Chrome in order for Chrome to figure out the logic and circumvent it - hopefully they dont spend too much time on circumventing these fixes especially considering it is GOOGLES OWN SYSTEM that is overriding GOOGLES OWN SYSTEM with autocomplete overriding auto-fill from calendar places API !

Answer 4

I had the same issue and solved it using the below jquery function

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

  }
});

Answer 5

Browser - Chrome.

For input where google api is attached, set attribute autocomplete on focus -

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

and for other fields setting this attribute directly works -

autocomplete="new-password"

For me only this value worked. Any other value and the stupid autofill makes a mess.

Answer 6

Use autocomplete="new-password" for input field for which you want auto-fill to be disabled. Google Chrome intentionally ignores autocomplete="off | false" but if you set to "new-password", then it ignores auto-fill.

Also check Google Places API way of handling auto-fill, ideally this should be the approach for implementing: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform