How to disable Chrome autocomplete feature?

Question

We want to disable autocomplete in Chrome browser in our React JavaScript application. We have tried a bunch of solutions available on the Inte.net but nothing worked. autoComplete=off is not reliable and so are other ways.

This is really important for us at this moment so can you please suggest us a foolproof way to disable autocomplete in Chrome using React JavaScript?

Secondly, we are using a common control/component for our text boxes and using them everywhere

Answer 1

执行autocomplete="new-password"以禁用自动完成。

Answer 2

You can override chrome autofill by add onFocus attribute.

render()
{
  return <input type="text" name="name" value="this is my input" autoComplete="off" onFocus={this.onFocus} />
}

In the onFocus method we need to change "autocomplete" attribute through javaScript.

onFocus = event => {

   if(event.target.autocomplete)
   {
     event.target.autocomplete = "whatever";
   }

};

This solution works for me.

let me know if it works for you ;)

Answer 3

Nothing worked for me including new-password , so this is how I did:

onFocus={(event) => {
  event.target.setAttribute('autocomplete', 'off');
  console.log(event.target.autocomplete);
}}

Answer 4

I got the same issue with my React project. My solution is to use a random string for autoComplete attribute. Don't use "off", as per Pim , you need to set a invalid value to really turn auto completion off. Please also note the attribute name has to be autoComplete in React.

Answer 5

The only hack that worked for me is to create hidden input and add random number for the original input name:

<input type="text" name="" value="" readOnly={true} style={{display: "none"}}/>
<input
  type="text"
  name={"address " + Math.random()}
/>

Answer 6

The only workaround that worked for me:

      onChange={({ target }) => {
          if (target.autocomplete === 'off') {
            setPassword(target.value);
          }
      }}
      onFocus={({ target }) => {
        target.setAttribute('autocomplete', 'off');
      }}

The goal is just to define any attribute and check if the value is correct. I chose autocomplete just to make it obvious.

Answer 7

try setting autocomplete="new-password" to the <input type="password"> , It works.

Answer 8

For me changing just the autoComplete attribute to 'new-password' didn't work on its own because the name attribute of the field was set to 'password'. As soon as I changed that to something else it worked (in my case for example I used 'devicePassword')

<input type='password' name='devicePassword' autoComplete='new-password' />

Answer 9

Try not to set the type attribute, if you have a password and username, remove both of those input types and voila.. problem solved

Answer 10

When using jsx - you have to camel case attributes; so autoComplete="new-password" instead of autocomplete .