Disabling Chrome Autofill

Question

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

User · Answer

I ve finally found success using a textarea  For a password field there s an event handler that replaces each character typed with a

User · Answer

Mike Nelsons provided solution did not work for me in Chrome 50 0 2661 102 m  Simply adding an input element of the same type with display none set no longer disables the native browser auto-complete  It is now necessary to duplicate the name attribute of the input field you wish to disable auto-complete on   Also  to avoid having the input field duplicated when they are within a form element you should place a disabled on the element which is not displayed  This will prevent that element from being submitted as part of the form action    lt input name  dpart  disabled  disabled  type  password  style  display none   gt   lt input name  dpart  type  password  gt   lt input type  submit  gt

User · Answer

For Angular users    Since the autocomplete    off  ignore by new chrome versions  chrome developer suggests autocomplete   false   random-string   so the google chrome modern browsers have 2 type of users helpers -        autocomplete  off   which prevents last cached suggestions     autocomplete    false   random-string   which prevents autofill setting  since the  random-string  is not known by the browser        so what to do  in case of disabling both the annoying suggestions  Here is the trick -   add autocomplete    off  in every input fields   or simple Jquery     Example      input   attr  autocomplete    off      Remove the  lt form name  form-name  gt  tag from HTML code and add ng-form    form-name  in your  lt div gt  container   Adding ng-form  form-name  will also retain all your validations

User · Answer

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   lt form autocomplete  off  gt  and  lt input autocomplete  off  gt  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    lt input type  text  name  prevent autofill  id  prevent autofill  value    style  display none     gt   lt input type  password  name  password fake  id  password fake  value    style  display none     gt   lt input type  password  name  password  id  password  value      gt    Hope it will help someone

User · Answer

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  amp  amp  this commandDown    true  amp  amp  this ctrlDown    true  amp  amp    charCode gt 47  amp  amp  charCode lt 58    charCode gt 64  amp  amp  charCode lt 91    charCode gt 96  amp  amp  charCode lt 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  gt  0     this commandDown  false  amp  amp  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

User · Answer

Like Dvd Franco said  for me only puting automplete  off  in all fields it worked  So I put this jquery rules in   document  ready    function on my main  js file     form no autofill   attr  autocomplete   off        no autofill input   attr  autocomplete   off

User · Answer

Enter a value of      a blank space  for the username field    lt input type    text  value       name    username    gt    If you re ever populating the username with a user-entered value  code to enter a     if there s no user-entered value   Edit  I also had to change  username  fields to have a name of something else than  username   e g   nameofuser

User · Answer

Since display none doesn t seem to work anymore  add the    lt input type  text  name  fakeusernameremembered   gt   lt input type  password  name  fakepasswordremembered   gt    inside a div with overflow hidden  max-width  amp  max-height 0px  So it becomes something like    lt div style  overflow  hidden  max-width  0px  max-height  0px   gt       lt input type  text  name  fakeusernameremembered   gt       lt input type  password  name  fakepasswordremembered   gt   lt  div gt

User · Answer

You have to add this attribute    autocomplete  new-password    Source Link   Full Article

User · Answer

If you are using Symfony forms  autocomplete off will not work IF the attribute is applied from the twig template rather than using FormBuilder   Use this        - gt add  field-name   TextType  class  array     attr    gt  array         autocomplete    gt   off               Rather than           form widget form field-name    attr     autocomplete   off

User · Answer

last time I checked Google updated their autofill in JAN 2017  the solution that worked for me was adding another input and hiding it after it has been populated      lt input type  text  id  phone number  name  phone number  value    gt    lt input type  text  id  dummy autocomplete  gt     lt script type  text javascript  gt              dummy autocomplete   hide     lt  script gt

User · Answer

I finally solved this by putting in a non duplicate variable in the input field - i used php time   like this    lt input type  text  name  town   time        gt    This was interfering mostly n android  All i did on the server side was to do a foreach loop on the input name - the issue is if chrome recognizes the name attribute it WILL auto populate   Nothing else even worked for me

User · Answer

This is the most recent solution that I have used       email   prop  autocomplete   true

User · Answer

For username password combos this is an easy issue to resolve  Chrome heuristics looks for the pattern    lt input type  text  gt    followed by    lt input type  password  gt    Simply break this process by invalidating this    lt input type  text  gt   lt input type  text  onfocus  this type  password   gt

User · Answer

It is so simple and tricky     google chrome basically search for every first visible password element inside the  lt form gt    lt body gt  and  lt iframe gt  tags to enable auto refill for them  so to disable this you need to add a dummy password element as the following     if your password element inside a  lt form gt  tag you need to put the dummy element as the first element in your form immediately after  lt form gt  open tag  if your password element not inside a  lt form gt  tag put the dummy element as the first element in your html page immediately after  lt body gt  open tag   You need to hide the dummy element without using css display none so basically use the following as a dummy password element    lt input type  password  style  width  0 height  0  visibility  hidden position absolute left 0 top 0    gt

User · Answer

I needed some extra fields for it to work properly  as chrome actually fills many fields  And I also needed to hide the fields in a more fancy way than display none for it to actually work     lt style gt  stylish   position absolute  top -2000px    lt  style gt   lt input id       fake email remembered  class  stylish  tabindex  -1   type  email  name  email autofill   gt    lt input id       fake userName remembered  class  stylish  tabindex  -1   type  text  name  userName autofill   gt   lt input id       fake firstName remembered  class  stylish  tabindex  -1    type  text  name  firstName autofill   gt   lt input id       fake lastName remembered  class  stylish  tabindex  -1    type  text  name  lastName autofill   gt   lt input id       fake phone remembered  class  stylish   tabindex  -1   type  text  name  phone autofill   gt   lt input id       fake address remembered  class  stylish   tabindex  -1    type  text  name  address autofill   gt   lt input id       fake password remembered  class  stylish   tabindex  -1    type  password  name  password autofill   gt   lt input id       fake password remembered2  class  stylish   tabindex  -1    type  password  name  passwordRepeated autofill   gt

User · Answer

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    lt input type  text  name  email  class  focus-select  value  your email com  gt   lt input type  password  name  password  class  focus-select  value  password  gt    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 add the attribute value 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    lt  -- Avoid Chrome autofill -- gt   lt input name  email  class  hide  gt    CSS    hide  display none      Ensure you keep the HTML note so that your other developers don t delete it  Also ensure the name of the hidden input is relevant

User · Answer

Previously entered values cached by chrome is displayed as dropdown select list This can be disabled by autocomplete off   explicitly saved address in advanced settings of chrome  gives autofill popup when an address field gets focus This can be disabled by autocomplete  false  But it will allow chrome to display cached values in dropdown   On an input html field following will switch off both   Role  presentation   amp  autocomplete  off    While selecting input fields for address autofill Chrome ignores those input fields which don t have preceding label html element    To ensure chrome parser ignores an input field for autofill address popup a hidden button or image control can be added between label and textbox  This will break chrome parsing sequence of label -input pair creation for autofill  Checkboxes are ignored while parsing for address fields  Chrome also considers  for  attribute on label element  It can be used to break parsing sequence of chrome

User · Answer

By setting autocomplete to off should work here I have an example which is used by google in search page  I found this from inspect element     edit   In case off isn t working then try false or nofill  In my case it is working with chrome version 48 0

User · Answer

I ve tried all the mentioned advises but none of them worked  I m using a google places autocomplete on the specifik input  and it is quite ugly if there is a google chrome autofill above the google places autocomplete list  Even setting autocomplete  anything  is useless because the autocomplete plugin itself setf this attr to  off  and it is totally ignored by chrome   so my sollution is   var fixAutocomplete   window setInterval function        if      myinput   attr  autocomplete        false             window clearInterval fixAutocomplete                    myinput   attr  autocomplete    false       500

User · Answer

Here s a dirty hack -   You have your element here  adding the disabled attribute     lt input type  text  name  test  id  test  disabled  disabled    gt    And then at the bottom of your webpage put some JavaScript    lt script gt      setTimeout function            document getElementById  test   removeAttribute  disabled              100    lt  script gt

User · Answer

The method of hiding it by adding  display  none   to the input didn   t work for me if the form is generated through javascript   So instead I made them invisible by placing them out of sight    lt input style  width 0 height 0 opacity 0 position absolute left -10000px overflow hidden   type  text  name  fakeusernameremembered   gt   lt input style  width 0 height 0 opacity 0 position absolute left -10000px overflow hidden   type  password  name  fakepasswordremembered   gt

User · Answer

I don t know why  but this helped and worked for me   lt input type  quot password quot  name  quot pwd quot  autocomplete  quot new-password quot  gt   I have no idea why  but autocomplete  quot new-password quot  disables autofill  It worked in latest 49 0 2623 112 chrome version

User · Answer

On Chromium 53 0 2785 92  64-bit  the following worked   lt div style  visibility hidden  gt       lt input type  text  name  fake username remembered  gt       lt input type  password  name  fake password remembered  gt   lt  div gt    display none doesn t work

User · Answer

Well since we all have this problem I invested some time to write a working jQuery extension for this issue  Google has to follow html markup  not we follow Google   function         use strict      fn autoCompleteFix   function opt        var ro    readonly   settings     extend           attribute    autocomplete           trigger                 disable     off                enable     on                      focus   function                   this  removeAttr ro                      force   false        opt          this  each function i  el            el     el            if el is  form                  var force    -1       inArray el attr settings attribute   settings trigger disable               el find  input   autoCompleteFix  force force              else               var disabled   -1       inArray el attr settings attribute   settings trigger disable               var enabled   -1       inArray el attr settings attribute   settings trigger enable               if  settings force  amp  amp   enabled    disabled                  el attr ro  ro  focus settings focus  val                              jQuery     Just add this to a file like  js jquery extends js and include it past jQuery  Apply it to each form elements on load of the document like this     function            form   autoCompleteFix          jsfiddle with tests

User · Answer

For me  simple   lt form autocomplete  off  role  presentation  gt    Did it   Tested on multiple versions  last try was on 56 0 2924 87

User · Answer

In case display  none doesn t work this is also possible and it seems to be working  Chrome v60 0 3112 113     hidden-fields       opacity  0      float  left      height  0px      width  0px      lt input type  text  name  username  class  hidden-fields  gt    lt input type  password  name  password  class  hidden-fields  gt    lt your actual login fields gt  lt  your actual login fields gt

User · Answer

If you are implementing a search box feature  try setting the type attribute to search as follows    lt input type  search  autocomplete  off    gt    This is working for me on Chrome v48 and appears to be legitimate markup   https   www w3 org wiki HTML Elements input search

User · Answer

In 2016 Google Chrome started ignoring autocomplete off though it is in W3C  The answer they posted      The tricky part here is that somewhere along the journey of the web autocomplete off become a default for many form fields  without any real thought being given as to whether or not that was good for users  This doesn t mean there aren t very valid cases where you don t want the browser autofilling data  e g  on CRM systems   but by and large  we see those as the minority cases  And as a result  we started ignoring autocomplete off for Chrome Autofill data    Which essentially says  we know better what a user wants   They opened another bug to post valid use cases when autocomplete off is required  I haven t seen issues connected with autocomplete throught all my B2B application but only with input of a password type   Autofill steps in if there s any password field on the screen even a hidden one  To break this logic you can put each password field into it s own form if it doesn t break your own page logic    lt input type name  gt    lt form gt       lt input type password  gt   lt  form gt

User · Answer

I ve faced same problem  And here is the solution for disable auto-fill user name  amp  password on Chrome  just tested with Chrome only        lt  -- Just add this hidden field before password as a charmed solution to prevent auto-fill of browser on remembered password -- gt       lt input type  tel  hidden   gt       lt input type  password  ng-minlength  8  ng-maxlength  30  ng-model  user password  name  password  class  form-control  required placeholder  Input password  gt

User · Answer

My workaround since none of the above appear to work in Chrome 63 and beyond  I fixed this on my site by replacing the offending input element with    lt p class  input  contenteditable  true  gt  amp nbsp  lt  p gt    and using jQuery to populate a hidden field prior to submission   But this is a truly awful hack made necessary by a bad decision at Chromium

User · Answer

None of the solutions worked for me  Finally  after pulling my hair out for many hours I came up with this solution for ReactJS    Tested on FireFox 54 0 1  Chrome 61 0 3163 100  Mac OS 10 13  I keep the type  text  and change it to relevant type on onChange event    ex  HTML    lt input type  text  onChange  this setAttributes  placeholder  Email    gt    JS   setAttr2  function e       var value   e target value      if value length         e target setAttribute  type    email         else         e target setAttribute  type    text

User · Answer

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    lt input readonly onfocus  this removeAttribute  readonly     type  text  gt    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

User · Answer

My problem was that Chrome would autofill postal code  over the Bootstrap autocomplete interface as I was auto suggesting possible values from my database   Things I had to do    Change input field s id property to something other than  postcode  Change input field s autocomplete value to false After calling     postcode field   autocomplete      I had to reset the autocomplete property with     postcode field   prop  autocomplete    false    because Boostrap s autocomplete plugin changes it to off automatically

User · Answer

Sometimes even autocomplete off won t prevent filling in credentials into wrong fields    A workaround is to disable browser autofill using readonly-mode and set writable on focus     lt input type  password  readonly onfocus  this removeAttribute  readonly      gt    The focus event occurs at mouse clicks and tabbing through fields   Update   Mobile Safari sets cursor in the field  but does not show virtual keyboard  This new workaround works like before  but handles virtual keyboard    lt input id  email  readonly type  email  onfocus  if  this hasAttribute  readonly          this removeAttribute  readonly           fix for mobile safari to show virtual keyboard     this blur       this focus          gt    Live Demo https   jsfiddle net danielsuess n0scguv6      UpdateEnd  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

User · Answer

As per Chromium bug report  352347 Chrome no longer respects autocomplete  off false anythingelse   neither on forms nor on inputs   The only solution that worked for me was to add a dummy password field    lt input type  password  class  hidden    gt   lt input type  password    gt

User · Answer

My hack     tested in Chrome 48   Since Chrome tries to find out the type of field it is by looking at stuff like id or name attributes of the  lt input gt   but also at associated  lt label gt  content  you just have to find meaningless names for these   For the id and name  it s easy to choose something else that is not listed here   For the label  I inserted an invisible  lt span gt  in the middle  e g  for a city  it s messing with my Places autocomplete     lt span gt Ci lt span style  display none  gt   lt  span gt ty lt  span gt    Full working example    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D     lt body gt  x000D       lt form method  post  action   register  gt  x000D         lt div gt  x000D           lt label for  name  gt Name lt  label gt  x000D           lt input id  name  type  text  name  name    gt  x000D         lt  div gt  x000D         lt div gt  x000D           lt label for  email  gt Email lt  label gt  x000D           lt input id  email  type  text  name  email    gt  x000D         lt  div gt  x000D         lt div gt  x000D           lt label for  id1  gt City lt  label gt  x000D           lt input id  id1  type  text  name  id1    gt   lt -- STILL ON    x000D         lt  div gt  x000D         lt div gt  x000D           lt label for  id2  gt Ci lt span style  display none  gt   lt  span gt ty lt  label gt  x000D           lt input id  id2  type  text  name  id2    gt   lt -- NOW OFF    x000D         lt  div gt  x000D       lt  form gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Use css text-security  disc without using type password   html   lt input type  text  name  user  autocomplete  off    gt   lt input type  text  name  pass  autocomplete  off  class  secure    gt   or   lt form autocomplete  off  gt       lt input type  text  name  user    gt       lt input type  text  name  pass  class  secure    gt   lt  form gt    css  input secure       text-security  disc      -webkit-text-security  disc

User · Answer

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

User · Answer

Thought i d post my fix   Found that you can t use display none so i came up with a quick and dirty solution to just make the fake input small and move it out of sight   So far so good until they break it again    x000D   x000D                       lt input id  FakePassword  type  password  style  float left position relative height 0 width 0 top -1000px left -1000px     gt  x000D   x000D   x000D

User · Answer

So apparently the best fixes hacks for this are now no longer working  again  Version of Chrome I use is Version 49 0 2623 110 m and my account creation forms now show a saved username and password that have nothing to do with the form  Thanks Chrome  Other hacks seemed horrible  but this hack is less horrible     Why we need these hacks working is because these forms are generally to be account creation forms i e  not a login forms which should be allowed to fill in password  Account creation forms you don t want the hassle of deleting username and passwords  Logically that means the password field will never be populated on render  So I use a textbox instead along with a bit of javascript    lt input type  text  id  password  name  password    gt    lt script gt      setTimeout function                 password   prop  type    password           100           time out required to make sure it is not set as a password field before Google fills it in  You may need to adjust this timeout depending on your page load times   lt  script gt    I find this acceptable as a user won t get to a password field within the short period of time  and posting back to the server makes no difference if the field is a password field as it is sent back plain text anyway   Caveat  If  like me  you use the same creation form as an update form things might get tricky  I use mvc asp c  and when I use  Html PasswordFor   the password is not added to the input box  This is a good thing  I have coded around this  But using  Html TextBoxFor   and the password will be added to the input box  and then hidden as a password  However as my passwords are hashed up  the password in the input box is the hashed up password and should never be posted back to the server - accidentally saving a hashed up hashed password would be a pain for someone trying to log in  Basically    remember to set the password to an empty string before the input box is rendered if using this method

User · Answer

try whit a blank space in the value      lt input type  email  name  email  value   amp nbsp   gt   lt input type  password  name  password  value   amp nbsp   gt    chrome 54 0 2840 59

User · Answer

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  lt form autocomplete  quot off quot  gt  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  lt input autocomplete  quot off quot  gt  which seems to be pretty much ignored by the password autofill  in Chrome that is  Firefox does obey it   Updated Solution Chrome now ignores  lt form autocomplete  quot off quot  gt   Therefore my original workaround  which I had deleted  is now all the rage  Simply create a couple of fields and make them hidden with  quot display none quot   Example   lt  -- fake fields are a workaround for chrome autofill getting the wrong fields -- gt   lt input style  quot display  none quot  type  quot text quot  name  quot fakeusernameremembered quot    gt   lt input style  quot display  none quot  type  quot password quot  name  quot fakepasswordremembered quot    gt   Then put your real fields underneath  Remember to add the comment or other people on your team will wonder what you are doing  Update March 2016 Just tested with latest Chrome - all good  This is a fairly old answer now but I want to just mention that our team has been using it for years now on dozens of projects  It still works great despite a few comments below  There are no problems with accessibility because the fields are display none meaning they don t get focus  As I mentioned you need to put them before your real fields  If you are using javascript to modify your form  there is an extra trick you will need  Show the fake fields while you are manipulating the form and then hide them again a millisecond later  Example code using jQuery  assuming you give your fake fields a class      quot  fake-autofill-fields quot   show       some DOM manipulation ajax here window setTimeout function           quot  fake-autofill-fields quot   hide       1    Update July 2018 My solution no longer works so well since Chrome s anti-usability experts have been hard at work  But they ve thrown us a bone in the form of   lt input type  quot password quot  name  quot whatever quot  autocomplete  quot new-password quot    gt   This works and mostly solves the problem  However  it does not work when you don t have a password field but only an email address  That can also be difficult to get it to stop going yellow and prefilling  The fake fields solution can be used to fix this  In fact you sometimes need to drop in two lots of fake fields  and try them in different places  For example  I already had fake fields at the beginning of my form  but Chrome recently started prefilling my  Email  field again - so then I doubled down and put in more fake fields just before the  Email  field  and that fixed it  Removing either the first or second lot of the fields reverts to incorrect overzealous autofill  Update Mar 2020 It is not clear if and when this solution still works  It appears to still work sometimes but not all the time  In the comments below you will find a few hints  One just added by  anilyeni may be worth some more investigation  As I noticed  autocomplete  quot off quot  works on Chrome 80  IF there is less than 3 elements in  lt form gt   I don t know what is the logic or where the related documentation about it  Also this one from  dubrox may be relevant  although I have not tested it  thanks a lot for the trick  but please update the answer  as display none  doesn t work anymore  but position  fixed top -100px left -100px  width 5px  does    Update APRIL 2020 Special value for chrome for this attribute is doing the job   tested on input - but not by me  autocomplete  quot chrome-off quot

User · Answer

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     August 2019 update  credit to  JonEdiger in comments   Note  lots of info online says the browsers now treat autocomplete  false  to be the same as autocomplete  off   At least as of right this minute  it is preventing autocomplete for those three browsers    Set it at form level and then for the inputs you want it off  set to some non-valid value like  none     lt form autocomplete  off  gt      lt input type  text  id  lastName  autocomplete  none   gt      lt input type  text  id  firstName  autocomplete  none   gt   lt  form gt

User · Answer

If you re having issues with keeping placeholders but disabling the chrome autofill I found this workaround    Problem  HTML   lt div class  form  gt       lt input type  text  placeholder  name  gt  lt br gt       lt input type  text  placeholder  email  gt  lt br gt       lt input type  text  placeholder  street  gt  lt br gt   lt  div gt    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   lt div class  form  gt       lt input type  text  required  required  gt       lt label gt Name lt  label gt         lt br gt       lt input type  text  required  required  gt       lt label gt Email lt  label gt           lt br gt       lt input type  text  required  required  gt       lt label gt Street lt  label gt           lt br gt   lt  div gt    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

User · Answer

What I have done it to change the input type  text  to a multi line input ie     overflow-x hidden   overflow-y hidden   vertical-align middle   resize  none    A quick explanation of the code  The overflow-x and -y hidden wil disable the scroll buttons on the right of the textarea box  The vertial algin will align the lable vertical middle with the text area and the resize  none will disable the resize grabber at the bottom right of the textarea    In essance it means that your textarea will appear like a textbox  but with chrome autofill off

User · Answer

Pure HTML solution     No javascript needed  no css needed and no hidden inputs needed    lt form autoComplete  new-password       gt           lt input name  myInput  type  text  autoComplete  off  id  myInput  placeholder  Search field    gt   lt  form gt    Notes    form does not necessarily need to be the direct parent of the input element input needs a name attribute

User · Answer

Jan 2021  autocomplete  quot off quot  does work as expected now  tested on Chrome 88 macOS    Sept 2020  autocomplete  quot chrome-off quot  disables Chrome autofill   Original answer  2015  For new Chrome versions you can just put autocomplete  quot new-password quot  in your password field and that s it  I ve checked it  works fine  Got that tip from Chrome developer in this discussion  https   bugs chromium org p chromium issues detail id 370363 c7 P S  Note that Chrome will attempt to infer autofill behavior from name  id and any text content it can get surrounding the field including labels and arbitrary text nodes  If there is a autocomplete token like street-address in context  Chrome will autofill that as such  The heuristic can be quite confusing as it sometimes only trigger if there are additional fields in the form  or not if there are too few fields in the form  Also note that autocomplete  quot no quot  will appear to work but autocomplete  quot off quot  will not for historical reasons  autocomplete  quot no quot  is you telling the browser that this field should be auto completed as a field called  quot no quot   If you generate unique random autocomplete names you disable auto complete  If your users have visited bad forms their autofill information may be corrupt  Having them manually go in and fix their autofill information in Chrome may be a necessary action from them to take

User · Answer

The only way that works for me was  jQuery required     document  ready function e        if    browser webkit                input id   val      val

User · Answer

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    x000D   x000D   function      x000D       use strict   x000D   x000D      var directive   function   timeout    x000D          return   x000D              restrict   A   x000D              link  function  scope  element  attrs    x000D                   timeout function      x000D                      element val       x000D                       timeout function      x000D                          element val      x000D                          x000D                      x000D                x000D             x000D         x000D   x000D      angular module  app directives   directive  autofillClear      timeout   directive    x000D        x000D   x000D   x000D    It s basically the same as some of the previous answers that would use jquery  but done in an angular way

User · Answer

In some cases  the browser will keep suggesting autocompletion values even if the autocomplete attribute is set to off  This unexpected behavior can be quite puzzling for developers  The trick to really forcing the no-autocompletion is to assign a random string to the attribute  for example   autocomplete  nope

User · Answer

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

User · Answer

The most recent solution of adding autocomplete  new-password  to the password field works great for preventing Chrome from autofilling it    However  as sibbl pointed out  this doesn t prevent Chrome from asking you to save the password after the form submission completes  As of Chrome 51 0 2704 106  I found that you can accomplish this by adding a invisible dummy password field that also has the attribute autocomplete  new-password   Note that  display none  does not work in this case  e g  Add something like this before the real password field    lt input type  password  autocomplete  new-password   style  visibility hidden height 0 width 1px position absolute left 0 top 0  gt     This only worked for me when I set the width to a non-zero value  Thanks to tibalt and fareed namrouti for the original answers

User · Answer

The autocomplete feature has successfully disabled via this trick  It Works    HTML    lt div id  login screen  style  min-height  45px   gt      lt input id  password 1  type  text  name  password  gt   lt  div gt     JQuery       login screen   on  keyup keydown mousedown     password 1   function  e        let elem     this        if  elem val   length  gt  0  amp  amp  elem attr  type        text             elem attr  type    password          else           setTimeout function                  if  elem val   length     0                    elem attr  type    text                    elem hide                    setTimeout function                          elem show   focus                       1                            1              if  elem val           amp  amp  e type      mousedown             elem hide            setTimeout function                  elem show   focus               1

User · Answer

With chrome  if you surround an input with a label and within the label  put the words street  address or both  it will ignore any attempt at disabling autofill    lt label for  searchAddress  class  control-label  gt  Street Address  lt input type  text  class  form-control  name  searchAddress gt  lt  label gt    Chrome detects keywords within the label to figure out the input type  It likely does this with other key words as well

User · Answer

Instead of  this is what worked for me  answers and other answers that look like complete hacks    This is currently how chrome  and the latest spec  will handle the autocomplete attributes on your input elements   https   developers google com web fundamentals design-and-ui input forms label-and-name-inputs hl en  TLDR  Add autocomplete   lt value gt   on your inputs  where  lt value gt  should be any string that defines what the field is for  This works similarly to the name attribute  Use the suggested values on the link above where possible    Also  remove the autocomplete attribute from your form

User · Answer

Jan 20 chrome update  None of the solutions above  including adding fake fields or setting autocomplete new-password works  Yes with these chrome will not autocomplete but when you enter the password field it will suggest the password again   I found that if you remove the password field and then add it again without an id then chrome does not autofill it and does not suggest the password on entry   Use a class to get get the password value instead of an id   For firefox there is still a need to add a dummy element   This solution also allows allowing forbidding autocomplete based on a flag   html    lt  -- form is initially hidden  password field has a dummy id and a class  id  -- gt   lt form id  loginForm  style  display none   gt      lt span gt email  lt  span gt  lt input type  text  placeholder  Email  id  loginEmailInputID   gt      lt span gt Password  lt  span gt  lt input class  loginPasswordInput  type  password  placeholder  Password  id  justForAutocomplete   gt   lt  form gt    page load   function hideAutoComplete formId        let passwordElem       formId   input password    prev passwordElem prev        passwordElem remove        prev after     lt input type  password  style  display none  gt     passwordElem clone   val     removeAttr  id        if   allowAutoComplete  hideAutoComplete  loginForm        loginForm   show      when you need the password       loginPasswordInput   val

User · Answer

Boom  Google Chrome and anyone else try defeat this then   I was able to get this implemented today 7th September 2017  but using a FormCollection of random strings that generated in my MVC View   I would first get a new random key in my index controller of my login page   encrypt and create a new totally unique random string  i actually used a 256 bit cypher to perform this  and a unique cypher and authentication key   i then append plain text  Username  and  Password  on the end of each string to later help me identify from the repsonding view controller the username and password  You could also change that plain string to anything as long as you know the pattern and it s unique   In my view  I then used these variables appropriately and then in the responding controller - searched through a FormCollection and found my matching variables - and then used the Key-Value of that item as the corresponding Username and Password to process appropriately   The other issue i had which i think is sneaky of Chrome  is that any   Any thoughts      lt style gt        font-face         font-family   password         font-style  normal        font-weight  400        src  url https   jsbin-user-assets s3 amazonaws com rafaelcastrocouto password ttf          lt  style gt    lt input type  text  name   Model UsernameRandomNameString    gt   lt input style  font-family   password   type  text  name   Model PasswordRandomNameString    gt   LogOnModel model   new LogOnModel                                 UsernameRandomNameString   Cryptography SimpleEncrypt  Username   UniqueGeneratorKey  UniqueGeneratorKey     Username                   PasswordRandomNameString   Cryptography SimpleEncrypt  Password   UniqueGeneratorKey  UniqueGeneratorKey     Password                    I think it a hell of a workaround  but hey it works  and i think it could also be future proof unless google determines the URL of the page has key words in it  then appropriately just adds its stupid extensions on top on any input field - but that s a little drastic

User · Answer

Different solution  webkit based  As mentioned already  anytime Chrome finds a password field it autocompletes the email  AFAIK  this is regardless of autocomplete    whatever    To circumvent this change the input type to text and apply the webkit security font in whatever form you want    secure-font  -webkit-text-security disc     lt input type   text  class  secure-font  gt    From what I can see this is at least as secure as input type password  it s copy and paste secure  However it is vulnerable by removing the style which will remove asterisks  of course input type   password can easily be changed to input type   text in the console to reveal any autofilled passwords so it s much the same really

User · Answer

Answer of Jobin Jose gave me a start  Here is what works for me    lt input type  password  name  password  id  password fake  style  display none     gt   lt input type  password  name  password   gt    Be sure to not have autocomplete  off   which spoils the solution

User · Answer

lt input readonly onfocus  this removeAttribute  readonly     type  text  gt    adding readonly attribute to the tag along with the onfocus event removing it fixes the issue

User · Answer

I ve found that adding this to a form prevents Chrome from using Autofill     lt div style  display  none   gt       lt input type  text  id  PreventChromeAutocomplete  name  PreventChromeAutocomplete  autocomplete  address-level4    gt   lt  div gt    Found here  https   code google com p chromium issues detail id 468153 hc41  Really disappointing that Chrome has decided that it knows better than the developer about when to Autocomplete  Has a real Microsoft feel to it

User · Answer

Also have to set the value to empty  value     besides autocomplete  off  to make it work

User · Answer

My Solution      function           form autocomplete off    find  input   attr  autocomplete    false          It sets the attribute  autocomplete  false   on all input fields in the forms that have  autocomplete  off     This works on chrome  firefox and safari

User · Answer

Unfortunately none of the solutions seem to work  I was able to blank out email  username  using                        lt  -- fake fields are a workaround for chrome autofill getting the wrong fields -- gt                       lt input style  display none  type  text  name  fakeusernameremembered   gt                       lt input style  display none  type  password  name  fakepasswordremembered   gt    technique  but password still populates

User · Answer

None of the other solutions to these question worked for me   The only think that worked is this one      It removes  name  and  id  attributes from elements and assigns them   back after 1ms  Put this in document get ready      document  ready function            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

User · Answer

My solution depends on three things thing    keydown event masking the field name blanking the fields values on submit   First of all  we need to prevent autocomplete of both username and password  so  initially we will set two flags  i -  username and j -  passowrd with true value  so without any keydown to the fields both i and j will be true   In may case the field masking is occured at the server side  by passing random string  it could be made easily made using client side too   This is the code     document  ready function       i  true    username flag    j  true     password flag        username   rand     keydown function e                   rand   is server side value passed in blade view              keyboard buttons are clicked in the field             i   false                        passowrd   rand     keydown function e                   rand   is server side value passed in blade view              keyboard buttons are clicked in the field             j   false                        Now we will use change event         username   rand     change function        if   this  val             the field has value         if i      there is no keyboard buttons clicked over it               this  val         blank the field value                         password   rand     change function        if   this  val              the same as username but using flag j         if j                 this  val                                  sForm   submit function e      the id of my form           password-s   val     password   rand     val                 username-s   val     username   rand     val                Here the server will deal with fields names  password  and  username  of the hidden fields            username   rand     val                  password   rand     val                 Here are the HTML    lt form class  form-horizontal  autocomplete  off  role  form  id  sForm  method  POST  action  https   example com login  gt                            lt input type  hidden  name  password  id  password-s  gt                           lt input type  hidden  name  username  id  username-s  gt                                lt label for  usernameTDU3m4d3I5  class  col-md-3 control-label  style  white-space  nowrap  gt Username lt  label gt                                    lt input id  usernameTDU3m4d3I5  placeholder  Username  autocomplete  off  style  border-bottom-left-radius  10px  border-top-right-radius  10px  font-family  fixed  font-size  x-large   type  text  class  form-control  name  usernameTDU3m4d3I5  value    required  required  autofocus    gt                                                                lt label for  passwordTDU3m4d3I5  class  col-md-3 control-label  style  white-space  nowrap  gt Password lt  label gt                                   lt input id  passwordTDU3m4d3I5  placeholder  Password  autocomplete  off  type  password  class  form-control  name  pa-TDU3m4d3I5  required    gt                                     lt button type  submit  class  btn btn-success  gt                                       lt i class  fox-login  style  text-shadow  0px 1px 0px  000  gt  lt  i gt  lt strong gt Login lt  strong gt  amp nbsp  amp nbsp                                   lt  button gt                                    lt  form gt    The above solution  indeed  will not eliminate or prevent the autocomplete of the username and password  but it make that autocomplete useless  i e without hitting keyboard button on the field  the field value will be blank before submit  so the user will be asked to enter them   Update  We can  also  use click event to prevent autocomplete from users list appeared under the field like the following        username   rand     click function                   this  val                  i   true          password   rand     click function                   this  val                  j   true        Limitations   This solution may not work as expected in touch screen devices    Final Update  I have done the following clean implementation like the following   preventAutoComplete   true     modifier to allow or disallow autocomplete trackInputs    password  0   username  0      Password and username fields ids as object s property  and  0  as its their values    Prevent autocomplete     if preventAutoComplete              input   change function e      Change event is fired as autocomplete occurred at the input field              trackId     this  attr  id      get the input field id to access the trackInputs object                         if  trackInputs trackId      0     trackInputs trackId       this  val       trackInputs property value not changed or the prperty value ever it it is not equals the input field value                   this  val         empty the field                                      input   keyup function e               trackId     this  attr  id                trackInputs trackId      this  val      Update trackInputs property with the value of the field with each keyup

User · Answer

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

[html] Disabling Chrome Autofill

Examples related to html

Examples related to forms

Examples related to google-chrome

Examples related to autocomplete

Examples related to autofill