Disabling Chrome Autofill

Disabling Chrome Autofill

I have been running into issues with the chrome autofill behavior on several forms.

The fields in the form all have very common and accurate names, such as "email", "name", or "password", and they also have autocomplete="off" set.

The autocomplete flag has successfully disabled the autocomplete behavior, where a dropdown of values appear as you start typing, but has not changed the values that Chrome auto-populates the fields as.

This behavior would be ok except that chrome is filling the inputs incorrectly, for example filling the phone input with an email address. Customers have complained about this, so it's verified to be happening in multiple cases, and not as some some sort of result to something that I've done locally on my machine.

The only current solution I can think of is to dynamically generate custom input names and then extract the values on the backend, but this seems like a pretty hacky way around this issue. Are there any tags or quirks that change the autofill behavior that could be used to fix this?

Answer by mike nelson for Disabling Chrome Autofill

I've just found that if you have a remembered username and password for a site, the current version of Chrome will autofill your username/email address into the field before any type=password field. It does not care what the field is called - just assumes the field before password is going to be your username.

Old Solution

Just use

and it prevents the password prefilling as well as any kind of heuristic filling of fields based on assumptions a browser may make (which are often wrong). As opposed to using which seems to be pretty much ignored by the password autofill (in Chrome that is, Firefox does obey it).

Updated Solution

Chrome now ignores . Therefore my original workaround (which I had deleted) is now all the rage.

Simply create a couple of fields and make them hidden with "display:none". Example:

Then put your real fields underneath.

Remember to add the comment or other people on your team will wonder what you are doing!

Answer by Priyanka for Disabling Chrome Autofill

Try the following jQuery code which has worked for me.

if ($.browser.webkit) {      $('input[name="password"]').attr('autocomplete', 'off');      $('input[name="email"]').attr('autocomplete', 'off');  }  

Answer by vikingben for Disabling Chrome Autofill

I'm adding this bit for a different point of view. Why not honeypot it to stop Chrome from botting your fields? It appears to work cross-browser for me. Worth a shot:

Place an input above your other fields you do not want filled. Set the style to display none and the end user will not ever know it's there. Also no yellow boxes.

Answer by Jobin Jose for Disabling Chrome Autofill

Try this. I know the question is somewhat old, but this is a different approach for the problem.

I also noticed the issue comes just above the password field.

I tried both the methods like

and but none of them worked for me.

So I fixed it using the snippet below - just added another text field just above the password type field and made it display:none.

Something like this:

Hope it will help someone.

Answer by user3638028 for Disabling Chrome Autofill

The only way that works for me was:(jQuery required)

$(document).ready(function(e) {      if ($.browser.webkit) {          $('#input_id').val(' ').val('');      }  });  

Answer by Chris Pratt for Disabling Chrome Autofill

There's two pieces to this. Chrome and other browsers will remember previously entered values for field names, and provide an autocomplete list to the user based on that (notably, password type inputs are never remembered in this way, for fairly obvious reasons). You can add autocomplete="off" to prevent this on things like your email field.

However, you then have password fillers. Most browsers have their own built-in implementations and there's also many third-party utilities that provide this functionality. This, you can't stop. This is the user making their own choice to save this information to be automatically filled in later, and is completely outside the scope and sphere of influence of your application.

Answer by Iamzozo for Disabling Chrome Autofill

Also have to set the value to empty (value="") besides autocomplete="off" to make it work.

Answer by Evilripper for Disabling Chrome Autofill

On google chrome 37 to disable autofill with jQuery:

   $(window).ready(function () {                $('#UserName').val(' ').val('');              $('#Password').val(' ').val('');        });  

I tried with $(document).ready but it not works! I also had to add the property autocomplete = "off" in the form tag .

Answer by Luke Snowden for Disabling Chrome Autofill

always works

jQuery(document).ready( function($) {        $(window).load( function(){            $('input').val( ' ' ); setTimeout( function(){ $('input').val( '' ); }, 20 );        });    });  

Answer by dsuess for Disabling Chrome Autofill

Sometimes even autocomplete=off would not prevent to fill in credentials into wrong fields. So it fills some field, but not the one for user or nickname!?

Fix: browser autofill in by readonly-mode and set writable on focus

(focus = at mouse click and tabbing through fields)

Explanation: Browser auto fills credentials to wrong text field?

filling the inputs incorrectly, for example filling the phone input with an email address

Sometimes I notice this strange behavior on Chrome and Safari, when there are password fields in the same form. I guess, the browser looks for a password field to insert your saved credentials. Then it autofills username into the nearest textlike-input field , that appears prior the password field in DOM (just guessing due to observation). As the browser is the last instance and you can not control it,

This readonly-fix above worked for me. Update: Pure JavaScript, no need for jQuery.

Answer by hyper_st8 for Disabling Chrome Autofill

Here's a dirty hack -

You have your element here (adding the disabled attribute):

And then at the bottom of your webpage put some JavaScript:

Answer by Ryan Grush for Disabling Chrome Autofill

If you're having issues with keeping placeholders but disabling the chrome autofill I found this workaround.

Problem

HTML

http://jsfiddle.net/xmbvwfs6/1/

The above example still produces the autofill problem, but if you use the required="required" and some CSS you can replicate the placeholders and Chrome won't pick up the tags.

Solution

HTML

            Name        
            Email          
            Street          
  
  

CSS

input {      margin-bottom: 10px;      width: 200px;      height: 20px;      padding: 0 10px;      font-size: 14px;  }  input + label {      position: relative;      left: -216px;      color: #999;      font-size: 14px;  }  input:invalid + label {       display: inline-block;   }  input:valid + label {       display: none;   }  

http://jsfiddle.net/mwshpx1o/1/

Answer by MZaragoza for Disabling Chrome Autofill

I really did not like making hidden fields, I think that making it like that will get really confusing really fast.

On the input fields that you want to stop from auto complete this will work. Make the fields read only and on focus remove that attribute like this

what this does is you first have to remove the read only attribute by selecting the field and at that time most-likely you will populated with your own user input and stooping the autofill to take over

Answer by Bernesto for Disabling Chrome Autofill

For username password combos this is an easy issue to resolve. Chrome heuristics looks for the pattern:

followed by:

Simply break this process by invalidating this:

Answer by Yared Rodriguez for Disabling Chrome Autofill

Finally I think I came with a decent solution. Understanding better how the dropdown works with Chrome helped :) Basically, the dropdown will be displayed when you focus the input and when you generate a mouse down event when you are typing an entry which matches with what Chrome has in memory. Keeping that in mind, and that Chrome does it for certain inputs when they have default names like "name", "email", etc. then we just need to remove the name when the dropdown is going to be displayed and add it back after :) I wanted to use a solution which can make it work just by adding the attribute autocomplete off. I thought it made sense. This is the code:

Solution 1

jQuery('body').on('mousedown','[name="name"][autocomplete="off"], [name="email"][autocomplete="off"]',function(e){      e.stopImmediatePropagation();      if(typeof this.currentName =="undefined")          this.currentName=jQuery(this).attr('name');      jQuery(this).attr('name','');  });    jQuery('body').on('blur','[autocomplete="off"]',function(e){      e.stopImmediatePropagation();      jQuery(this).attr('name',this.currentName);  });  

Solution 2 (My Favourite One)

The solution I described above will remove the name of the input until we remove the focus (blur), in that moment it will put the original name back. But might happen that we are interested on having access to the input through its name attribute while we are typing. Which means that we need to put the name back right after each input. This solution, basically is based on the first solution. In this case, we will add the name on key down, and put it back on keyup. I think this is more neat for compatibility with what the "autocomplete off" behaviour should be. Anyway this is the code:

jQuery('body').on('mousedown keydown','[name="name"][autocomplete="off"], [name="email"][autocomplete="off"]',function(e){      e.stopImmediatePropagation();      if(typeof this.currentName =="undefined")          this.currentName=jQuery(this).attr('name');      jQuery(this).attr('name','');  });  jQuery('body').on('blur keyup','[autocomplete="off"]',function(e){      e.stopImmediatePropagation();      if(typeof this.currentName !="undefined")          jQuery(this).attr('name',this.currentName);  });  

Please notice that for Solution 1 and 2, I just took the cases where the input name is "name" and "email". For any other case where this attribute makes Chrome generate the dropdown you will have to add it in the selector for the mouse down event.

Solution 3

This solution is a lot more messy. I did not realize that the behaviour we are trying to correct is just based on those inputs with a specific name like "name, email, etc". The approach of this solution was for that case that Chrome display for other names that we don't know a priori. It would be a very generic solution. I do not like as much as the other 2, basically because there could be a small flicker when we press on the delete key. I will explain that bellow.

I found out that the dropdown was appearing after a second click on the input but not on the first click when you focus the first time on the input. I bind a "mousedown" event for all this elements where the handler basically detect if it is already focused on the input and in case it detects another "mouse down", force a .blur() and then .focus() after, preventing the dropdown on the second click once it is focused. I hope, it is clear, just in case here is the code that I used:

jQuery('body').on('mousedown','[autocomplete="off"]',function(e){      e.stopImmediatePropagation();      if(jQuery(this).is(':focus')) {          jQuery(this).blur();          jQuery(this).focus();      }  });  

In the other hand, in order to prevent the dropdown while you are typing in case it matches with Chrome suggestions... This is a little bit tricky. I just decided to replace the default behaviour of an input while user types. The dropdown evaluates the input on mouse down, so I prevent the default behaviour for alphanumerics, space, etc. The only problem is with Command,Ctrl and delete. For this case I had to bind also an event on mouse up. It allows the default behaviour in the first two cases so you can make copy, and paste, or select all. In the case of the delete, I have to allow the default behaviour, but if after deleting a character the input matches with Chrome suggestions, then again it was showing the dropdown. For this case I had to use the same trick of blur and focus. The only inconvenience I found on this is that since we are cancelling the behaviour on keyup, and chrome tries to show it on keydown, there is a small flicker. Anyway, this is the best I could do. Probably it will require for filtering of characters at one point. I just added the conditions made more sense for now. This is the second part of the code:

jQuery('body').on('keydown','[autocomplete="off"]',function(e){      e.stopImmediatePropagation();      var ctrlKey = 17,cmKey = 91;      var charCode = e.which || e.keyCode;        if(charCode!=16 && this.commandDown != true && this.ctrlDown != true && ((charCode>47 && charCode<58)||(charCode>64 && charCode<91)||(charCode>96 && charCode<123)||charCode==0 || charCode==32)){           e.preventDefault();          var charStr = String.fromCharCode(charCode);          if(!e.shiftKey)              charStr = charStr.toLowerCase(charStr);          $(this).val($(this).val() + charStr);      }else{          if (charCode == cmKey) this.commandDown = true;          if (charCode == ctrlKey) this.ctrlDown = true;      }  });  jQuery('body').on('keyup','[autocomplete="off"]',function(e){      e.stopImmediatePropagation();      var allowed=[8];//Delete      var ctrlKey = 17,cmKey = 91;      var charCode = e.which || e.keyCode;        if (charCode == cmKey) {this.commandDown = false};      if (charCode == ctrlKey) {this.ctrlDown = false};      if(allowed.indexOf(charCode)>=0 || (this.commandDown!=false && this.ctrlDown!=false)){          jQuery(this).blur();          jQuery(this).focus();  }  

As I said this solution is much more messy. It was the first one I used until I realized that the dropdown just appeared for certain input names.

Sorry for writing so much, I just wanted to be sure everything was clear. I hope it helps.

Answer by Kaszoni Ferencz for Disabling Chrome Autofill

After months and months of struggle, I have found that the solution is a lot simpler than you could imagine:

Instead of autocomplete="off" use autocomplete="false" ;)

As simple as that, and it works like a charm in Google Chrome as well!

Answer by David Adams for Disabling Chrome Autofill

I was having this problem with a "sign in now or register" modal window, and was a problem if the user had saved their credentials to the browser. Both the sign in and register fields were populated, so I was able to clear them with the following angular js directive:

(function () {      "use strict";        var directive = function ($timeout) {          return {              restrict: "A",              link: function (scope, element, attrs) {                  $timeout(function () {                      element.val(" ");                      $timeout(function () {                          element.val("");                      });                  });              }          };      };        angular.module("app.directives").directive("autofillClear", ["$timeout", directive]);  }());

It's basically the same as some of the previous answers that would use jquery, but done in an angular way.

Answer by rybo111 for Disabling Chrome Autofill

Here are my proposed solutions, since Google are insisting on overriding every work-around that people seem to make.

Option 1 - select all text on click

Set the values of the inputs to an example for your user (e.g. your@email.com), or the label of the field (e.g. Email) and add a class called focus-select to your inputs:

And here's the jQuery:

$(document).on('click', '.focus-select', function(){    $(this).select();  });  

I really can't see Chrome ever messing with values. That'd be crazy. So hopefully this is a safe solution.

Option 2 - set the email value to a space, then delete it

Assuming you have two inputs, such as email and password, set the value of the email field to " " (a space), and give it a class of autocomplete-off, then clear this with JavaScript. You can leave the password value empty.

If the user doesn't have JavaScript for some reason, ensure you trim their input server-side (you probably should be anyway), in case they don't delete the space.

Here's the jQuery:

$(document).ready(function() {    setTimeout(function(){      $('.autocomplete-off').val('');    }, 15);  });  

I set a timeout to 15 because 5 seemed to work occasionally in my tests, so trebling this number seems like a safe bet.

Failing to set the initial value to a space results in Chrome leaving the input as yellow, as if it has auto-filled it.

Option 3 - hidden inputs

Put this at the beginning of the form:

CSS:

.hide{ display:none; }  

Ensure you keep the HTML note so that your other developers don't delete it!

Answer by tibalt for Disabling Chrome Autofill

For new Chrome versions you can just put autocomplete="new-password" in your password field and that's it. I've checked it, works fine.

Got that tip from Chrome developer in this discussion: https://code.google.com/p/chromium/issues/detail?id=370363#c7

P.S. don't forget to use unique names for different fields to prevent autofilling.

Answer by Hemant_Negi for Disabling Chrome Autofill

I know this is not exactly relevant but here is what i did. The auto filled fields raise a 'change' event but only if you bind it to them as early as possible.

so i put this inside the head section.

  $(document).ready(function(){              $('input').on('change',function(){$(this).val('')})       });   

and it worked for me.