How do I disable Chrome to autocomplete email username / password?

Question

I know that it has been answered many times on SO, but this is for older versions of Chrome.

I have Chrome version 53.0.2785.143.

I want to disable Chrome to autocomplete password fields,

I tried all the methods mentioned in old SO answers,

Method 1:

Tried using fake username passwords.

<input style="display:none" type="text" name="fakeusernameremembered"/> <input style="display:none" type="password" name="fakepasswordremembered"/> 

Method 2:

Tried to use autocomplete='new-password' and autocomplete='false' and autocomplete='off'

But none of this works.

Answer 1

Try display:none

 <input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="display:none;" /> <input type="password" name="password_fake" id="password_fake" value="" style="display:none;" /> <input type="password" name="password" id="password" value="" /> 

You can also use jQuery to solve this problem, I hope this helps you if not a request to put a comment here, good luck :)

Update:

It depends on the version of chrome, sometimes it will not work for new versions of chrome, so you have to try a lot of things to prevent this problem, try these code snippets as well and please leave a comment :)

Decision 2

 $('form[autocomplete="off"] input, input[autocomplete="off"]').each(function () { var input = this; var name = $(input).attr('name'); var id = $(input).attr('id'); $(input).removeAttr('name'); $(input).removeAttr('id'); setTimeout(function () { $(input).attr('name', name); $(input).attr('id', id); }, 1); }); 

It removes the attributes "name" and "id" from the elements and assigns them back after 1 ms. Put it on the document to prepare.

Decision 3

 <input type="text" name="email"> <input type="password" name="password" autocomplete="new-password"> 

Tested and works in Chrome 53

Decision 4

try autocomplete="false" instead of autocomplete="off" or nofill

Answer 2

• Add an autocomplete attribute with the username value for the username.
• If you have implemented an "email input stream" that splits the username and password into two separate forms, specify the form field containing the username in the form used to collect the password. You can, of course, hide this field through CSS, if that suits your layout.
• Add an autocomplete attribute with the current password value for the password field in the login form.
• Add an autocomplete attribute with a new-password value for the password field in the password registration and change forms.

• If you need to enter the password twice when registering or updating the password, add the autocomplete attribute of the new password in both fields.

   <input type="text" autocomplete="username"> <input type="password" autocomplete="current-password"> 

Answer 3

In the scenario, when the administrator wants to change the user's email / password, autocomplete replaces the user’s email with the administrator and the administrator’s password filled in.

What worked for me was to configure the fields (email address, password ...) to disable and enable them using tiemout a second after the page loads. Thus, they become available to the user after the browser automatically launches them.

The risk is that something violates js and they remain inaccessible.

If your part of the server is not very dependent on the input names, I would recommend just changing them so that they differ from those used in the login form - they will not be filled automatically (unless you request it specifically).

Otherwise, an example code is provided:

  <input id="email" type="email" name="email" value=" [e-mail] " disabled> <input id="password" type="password" name="password" disabled> <script> $(document).ready(function(){ setTimeout( function(){ $('#myform input[diabled]').removeAttr('disabled'); }, 1000); ); </script> 

Answer 4

Chrome will only autofill the password if the input is type="password" - otherwise it risks exposing the user's password in plain text. So, use type="text" in the input field, and then change the type attribute to "password" when the user focuses on the input.

Password field:

 <input type="text" class="form-control" placeholder="Password" onfocus="this.setAttribute('type', 'password')" /> 

Full example: (using Bootstrap 3 classes and Awesome font icons)

 <form> <div class="form-group"> <input type="text" class="form-control" placeholder="Email Address" /> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="Password" onfocus="this.setAttribute('type', 'password')" /> </div> <div class="text-xs-center"> <button type="submit" class="btn btn-primary" style="width: 100%;"> <i class="fa fa-lock" style="padding-right: 10px;"></i> LOG IN </button> </div> </form> 

Answer 5

One possible solution to this would be to first set the input type to "text" and then add an event listener for input that updates the type "password" after editing the field. This will allow you to save all password entry functions and, hopefully, bypass all autofills / managers passwords. Sort of:

HTML

 <input type='text' class='my-input' /> 

Js

 const input = document.querySelector('.my-input'); input.addEventListener('keydown', () => { input.setAttribute('type', 'password'); }); 

Answer 6

Use jQuery disableAutoFill plugin

 $('#login-form').disableAutoFill(); 

Document: https://github.com/terrylinooo/jquery.disableAutoFill

Demo: https://terrylinooo.imtqy.com/jquery.disableAutoFill/

Answer 7

For me, from 02/22/2019, I tried this, but did not get a working solution. I tried with visibility , display , autocomplete and it seems like this is not working. Maybe I missed something as I use Material UI.

For me, I got two working solutions. This is JSX code , you can use the same property with your own CSS CSS syntax

1) with opacity and position

  <input type="email" style={{opacity:"0", position:"absolute"}}/> <input type="password" style={{opacity:"0", position:"absolute"}}/> 

2) with z-index and position

 <input type="email" style={{zIndex:":-100", position:"absolute"}}/> <input type="password" style={{zIndex:"-100", position:"absolute"}}/> 

Hope this saves someone time.

Answer 8

According to the Mozilla doc, in most modern browsers, setting the autocomplete to “off” will not prevent the password manager from asking the user if he wants to save information about the username and password, or automatically fill in these values ​​in the form of a site login.

you have to use

 autocomplete = "new-password" 

When creating a new account or changing passwords, this should be used for the "Enter new password" or "Confirm new password" field, unlike the general "Enter your current password" field that may be present. This can be used by the browser both to avoid accidentally filling in an existing password, and to help create a strong password.

You can see all the autocomplete values here for reference and a better understanding.

Answer 9

I finally succeeded using textarea with an event handler that replaces each character typed with "•".

Answer 10

unfortunately, nothing worked for me (win10, opera / chomium) there is no "new password", no other solutions ... there was a problem with the built-in style, when it was hidden by it, autocomplete progressed

here is my working solution: we need two types = password and hide external css first

 <input type="password" class="vapor zero"> <input id="hes" type="password" placeholder="actual password" autocomplete="off" autocomplete="false" autocorrect="off" name="password2" value="" autocomplete="new-password" required> 

CSS

 .zero{ width:0px !important; height:0px !important; padding:0 !important; border:1px solid white; } 

jquery killer (exactly):

 $(".vapor").fadeOut(5400, function() { $(this).remove(); }); 

Answer 11

You can try this way.

Disable autocomplete If you do not want to see the saved personal information each time you fill out the form, you can disable autocomplete.

Open Chrome. In the upper right, click "Details" and then Settings.

At the bottom, click Show advanced settings .

In the " Passwords and Forms " section, uncheck the " Enable auto-complete to fill out web forms in one click". To enable auto-complete again, select the check box again.