Programmatically disabling Chrome auto-fill

Question

There’s some discussion about this around the internet (especially here on stack overflow), but quite a lot of it dates from around 2015, so I was wondering if anyone had any recent experience.

We use a JavaScript widget to power type-ahead search functionality on web forms, but this UI is consistently overlaid with the Chrome autofill.

While autocomplete=“off” used to work, Chrome seems to ignore this value now, and show the UI anyway. The only thing I can find that works with Chrome 66/67 on OSX is an invalid value, such as autocomplete=“blah”. This seems way too sketchy though, and we have experimented with this before and it gets ignored in certain situations/Chrome versions.

Has anyone fond a reliable way to turn this off using HTML/Javascript?

As a side note - it looks like even Google can’t turn it off when needed, as their own Google maps type-ahead widget gets overlaid by the Chrome autofill. This can be seen on most Shopify stores.

Answer 1

autocomplete="off" doesn't work anymore. The only thing which works as of 2019 is autocomplete="new-password"

Check this link on Chromium Project https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands

Add an autocomplete attribute with a value of username for usernames.

If you've implemented an "email first" sign-in flow that separates the username and password into two separate forms, include a form field containing the username in the form used to collect the password. You can, of course, hide this field via CSS if that's appropriate for your layout.

Add an autocomplete attribute with a value of current-password for the password field on a sign-in form.

Add an autocomplete attribute with a value of new-password for the password field on sign-up and change-password forms.

If you require the user to type their password twice during sign-up or password update, add the new-password autocomplete attribute on both fields.

<form id="login" action="signup.php" method="post">    <input type="text" autocomplete="new-password">    <input type="password" autocomplete="new-password">    <input type="submit" value="Sign Up">  </form>