发表新帖
发表新帖

Chrome Autofill covers Autocomplete for Google Maps API v3

后端 未结
关注
21 1045
我在风中等你
我在风中等你 2021-02-01 00:57

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

相关标签:
21条回答
  • 逝去的感伤
    2021-02-01 01:41 
        var address1 = document.getElementById("myaddress");
    address1.addEventListener("focus", clearDefaultAutoComplete);
    function clearDefaultAutoComplete() {
        address1.removeAttribute("autocomplete");
        address1.setAttribute("autocomplete", "no");
    }
    0 讨论(0)
  • 野趣味
    2021-02-01 01:42

    I managed to fix this issue for Chrome 69 by changing the input's placeholder.

    I had 2 inputs tied to Google Places Autocomplete. As soon as you clicked the field, autofill showed up covering the suggestions from Autocomplete. I also had a listener set-up to change the 'autocomplete' attribute of the input to something random, like 'no-google-autofill'. That worked well until I upgraded to Chrome 69.

    Eventually, I fixed it by changing the input's placeholder from 'Postcode' to 'Area'. Apparently, the autofill got triggered because of the placeholder. Sometime's Chrome tries to be too smart for its own good.

    0 讨论(0)
  • [愿得一人]
    2021-02-01 01:44

    To quote Elmux's comment on answer https://stackoverflow.com/a/50927328/1350573 above:

    With Chrome 71, I removed the attribute placeholder from the console, and it works automagically. If I change the attribute value for something else, it works too. Finally, avoid using the term 'Address' in the placeholder attribute. – Elmux

    For me (30th December 2018, Chrome 71) this was the correct, but non-intuitive answer.

    0 讨论(0)
  • 花落未央
    2021-02-01 01:45

    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) :

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

    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:

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

    Bottom line: Chrome does adhere to the autocomplete=off but the autofill of Chrome is the problem. Hope this helps.

    0 讨论(0)
  • 执笔经年
    2021-02-01 01:45

    Simply use below code, this should help you. It will set autocomplete attribute to "new-loc" (you can add any custom value like new-address etc.).

    var input = $("#myaddress");
this.$window.google.maps.event.addDomListener(input[0], 'focusin', e => e.target.setAttribute('autocomplete', 'new-location'));
    0 讨论(0)
  • 没有蜡笔的小新
    2021-02-01 01:47

    jQuery solution:

    $('#address').focus(function() {
    $(this).attr('autocomplete', 'new-password');
});
    0 讨论(0)
 看不清?
提交回复
热议问题