Disable chrome autofill for username and password not working for newer versions

Question

My project is in ReactJS and Redux and I am using redux-form for my forms. I have two forms (both have input type text and password fields) in a page in my website. Now, chrome shows the autofill list for one form in the other and it is not working properly due to which bounce rate in my website has increased.

I would like to disable the autofill and autocomplete dropdown list but not getting any solution for this. My Chrome version is Version 71.0.3578.98.

I have tried the following things (as read from other Stack Overflow links); but none of them works.

• Use autocomplete values off/nope/new-password (Looks like chrome ignores this in case of username/password fields) (https://stackoverflow.com/a/38257374/6487887) (Disabling Chrome Autofill)
• Use autocomplete="off" for form instead of input fields
• Using a hidden input type text and password (https://www.20spokes.com/blog/what-to-do-when-chrome-ignores-autocomplete-off-on-your-form)
• Using different names for the various fields
• Making field readonly and then remove readonly on focus

The only this which seems to work properly is make the fields readonly and remove readonly when user starts to type (onKeyDown event). Then if user presses the backspace and input is empty, make is readonly again otherwise the autofill dropdown list again shows up. This solution is more of a hack and I would like to know any better solution for this.

PS: This is a duplicate question but I have not got any relevant solution for this which works in new version of Chrome. Links which I followed: Disabling Chrome Autofill, Chrome ignores autocomplete="off", How to disable Chrome to autofill username/email password?, Disable Google Chrome Autocomplete / Autofill / Suggestion and a lot more.

Answer 1

Alternative approach

The root cause of this problem is that setting input type="password" automatically makes all saved credentials to pop up, and nothing seems to work in order to stop it.

The general idea of this solution is to avoid setting type="password" and making the input text look like a password field. Fortunately, doing this in Chrome is pretty simple, but unfortunetely this doesn't work for Firefox, Internet Explorer and Firefox Android, acording to this link https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-security

The solution

Instead of using the classic input with type set to password

<input type="password"/>

do the following:

<input type="text" style="-webkit-text-security: disc;"/>

Hope this solution is useful for you.

Answer 2

I've been trying to get a reliable method of stopping exactly this and the only solution I've found to work is placing a couple of hidden fields at the top of the body.

<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>

Hacky, I know, but I even tried the exact example given in the Chrome team response link that Coderer mentioned:

As an example, if you have an address input field in your CRM tool that you don't want Chrome to Autofill, you can give it semantic meaning that makes sense relative to what you're asking for: e.g. autocomplete="new-user-street-address". If Chrome encounters that, it won't try and autofill the field.

...but that doesn't work (although the post is many years old).