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?

1 upvote
  flag
Please complete (and clarify) the sentence “Chrome autopopulates the fields as”. What do you mean by “auto-populate”, which seems to mean something else than autocomplete? Also please provide a self-contained demo and/or URL of a demo. It sounds like the issue is caused by some JavaScript code on the page or by some Chrome add-on. – Jukka K. Korpela
3 upvote
  flag
@JukkaK.Korpela Autocomplete looks like this where it suggests values as you type. The auto populate looks like this where when the page loads, chrome detects inputs and guesses what values to fill them with, as well as coloring the backgrounds yellow. In my case it is guessing incorrectly. – templaedhel
1 upvote
  flag
upvote
  flag
I see; then this is a duplicate, right? – Jukka K. Korpela
4 upvote
  flag
It's not a duplicate. This one handles disabling the autofill, that one handles styling the autofill color ... – Nicolae Surdu
1 upvote
  flag
upvote
  flag
Accept Mike's answer it helps the community – CheGueVerra
14 upvote
  flag
autocomplete="false" instead of autocomplete="off" as per Kaszoni Ferencz answer, get voting for it people. – roughcoder
upvote
  flag
6 upvote
  flag
Look at the number of answers to this question - it should tell you something: you're fighting a losing battle. This is no longer a Chrome issue, Firefox and others have been following suit. Like it or not, you need to accept the decision of the browser industry, that form auto-complete is the user's choice - you can fight them, but you will lose. At the end of the day, the question you should be asking is not, how can I subvert auto-complete, but rather, how do I create forms that work well with auto-complete. Your concerns about security are not yours to worry about, but the users. – mindplay.dk
upvote
  flag
I agree with @mindplay.dk. Read more about the controversy at groups.google.com/a/chromium.org/forum/#!msg/security-dev/… Even if you get an answer today that works, Chrome devs are probably working to bypass it. It's a twisted version of whack-a-mole. – Fuhrmanator
1 upvote
  flag
Browsers won't likely attain a perfect strategy of autofilling, because there's no standard to identify username/password fields used in login screens. The browsers seem to be using heuristics with type="password" that, although are useful for many true login screens, also produce many wrong attempts to autofill where password (or masked) inputs are used. – Fuhrmanator
upvote
  flag
For others stumbling upon this, the best resource to understanding this for me has been this MDN article. In short, autocomplete="just about anything other than on or off" seems to do the trick. developer.mozilla.org/en-US/docs/Web/Security/… – curiouser
upvote
  flag
autocomplete="off" works.... For me: <input id="q" type="text" data-bind="textInput: q" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox"> – pimbrouwers
10 upvote
  flag
Sorry, but @mindplay.dk's response is counter-productive. My situation is I have users who have logged into my site and a page on the site is for them to enter account/pwd information for other systems. When I put up a diaog for them to enter a new one, their logon info for my site gets filled in, which is completely wrong and will cause problems if/when users inadvertently enter that information in. The two have nothing whatever to do with each other. In this case the browser is doing something counter to what the user wants. – Mike K
upvote
  flag
Note that if your <form> tag has autocomplete="on", then it will override autocomplete="false" for individual form elements – groovenectar
2 upvote
  flag
@mindplay.dk - My web application is a workflow management application for the workplace, so, no, the concerns about security are mine to worry about, as mandated by top management and must be adhered to by all employees, aka "the users." However asking them to set Chrome, IE, or any other browser themselves is going to leave gaps in the authentication process, since they can, intentionally or not, wind up using the autofill. ANot all web applications are of the same type, with the same kinds of users or concerns. – PoloHoleSet

69 Answers 11

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 <form autocomplete="off"> 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 <input autocomplete="off"> which seems to be pretty much ignored by the password autofill (in Chrome that is, Firefox does obey it).

Updated Solution

Chrome now ignores <form autocomplete="off">. 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:

<!-- 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"/>

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):

        $(".fake-autofill-fields").show();
        // some DOM manipulation/ajax here
        window.setTimeout(function () {
            $(".fake-autofill-fields").hide();
        },1);
upvote
  flag
For the workaround solution: wouldn't this make the password field autofilled nevertheless ? And thank you for the edit solution. I would leave only that as an answer. – Nicolae Surdu
upvote
  flag
Good point, removed that workaround and now just has the solution. – mike nelson
upvote
  flag
Thanks for sharing this info. Was having this very same weird behavior and wasn't understanding why it happens until you clarify. On my case, it only happened when I turned autocomplete="on". That was why I wasn't experiencing this issue before. – lucasarruda
upvote
  flag
Excellent answer for the reason. For the solution, I'm trying this, as well as //allinonescript.com/q/10938891/292060. I'd prefer to turn off autofill, but keep autocomplete. – goodeye
5 upvote
  flag
I was so sure this would work as you explained perfectly the heuristic autofill I'm experiencing with input before password field. Unfortunately, it didn't work for me, I put autocomplete="off" on both the form and all the inputs and they still get filled. The only solution that worked for me is in goodeye's link above. (placing a second hidden type="password" input before the password throws off chrome's heuristic checks) – parliament
15 upvote
  flag
This used to work fine, I used it too, but since a Chrome upgrade some time ago (between then and May 5th), Chrome ignores the form property :( – Tominator
upvote
  flag
doesn't work anymore – John Smith
8 upvote
  flag
Google took the decision in (Chrome v34 I think) to make it policy to ALWAYS now ignore autocomplete="off", including form level directives ... that would be fine if it actually got the damn fields right. – Jammer
upvote
  flag
Thanks for the comments, I've tried it again myself also and agree my old solution no longer works, so have updated with the latest solution. – mike nelson
5 upvote
  flag
It is incredibly annoying that google decided to make chrome ignore the autocomplete attribute - it kept autofilling a user record edit form with the admins login details until I found your work around. Thanks. – carbontwelve
3 upvote
  flag
The solution does indeed work but it's ridiculous that such a kludge is even necessary. When a dev codes autocomplete=off into a form, it's usually for a good reason. No means no, Chrome! Discussion of the issue: code.google.com/p/chromium/issues/detail?id=352347 – Mark42
2 upvote
  flag
you can remove the name attributes so these fake params aren't posted to server – Patrick Cullen
upvote
  flag
Thanks for the workaround. I had to change a bit by putting the fake username before the real one and fake password after the the real one. – qmo
upvote
  flag
@qmo - why did you have to do that? It usually works fine having both fake user and fake password before the real ones. – mike nelson
upvote
  flag
@mikenelson It didn't work for me, Chrome picked up the fake username + the real password. Btw, I'm using Chrome 39. – qmo
upvote
  flag
@Mark42 The reason all browsers had to start ignoring it is because developers would put it there without good reason. E.g. Managers, lawyers, legal department, HIPAA, and Sarbanes–Oxley are not valid reasons to disable autocomplete. But that didn't stop developers from bowing to pressure from the U.S. government. The better way to not auto-complete passwords is to tell Chrome to not remember your password. – Ian Boyd
2 upvote
  flag
Even better: remove the name="" attributes on both inputs and that information never even gets posted to your server, but it still fools Chrome. – praniclift
upvote
  flag
Note, this solution no longer works: jsbin.com/lugavepaya/edit – kentcdodds
upvote
  flag
Yes it does. I just used the above solution. And your jsbin works as well. Chrome 41. :) – Magnus Eriksson
1 upvote
  flag
This will become a big security issue ?? If the user mistakenly click the "save password", and he doesn't view any passwords on the login textboxes. He will think that there's no password saved. but its still saved, and recoverable by Javascript :/ – Yesudass Moses
2 upvote
  flag
Hi guys, this solution doesn't work. Tried on both Chrome 41 and 42. So I twisted the hack by inserting invisible spans into the label instead. It worked beautifully on Chrome 41 and 42. - <label for="address">Registered Add<span style="display:none">This is to make Chrome to not autocomplete</span>ress: </label> – ng-darren
9 upvote
  flag
try autocomplete="false" not autocomplete="off" – roughcoder
43 upvote
  flag
This attribute is also required: autocomplete="I told you I wanted this off, Google. But you would not listen." – rybo111
upvote
  flag
It worked for me even without name attribute. But I had to add non-empty value attributes to prevent FF (38.0.5) from autocompleting these hidden inputs. – cyberskunk
upvote
  flag
@MagnusEriksson: No. The jsbin does not work. Chrome 43.0.2357.134 – Jim G.
upvote
  flag
Yes, I can confirm that next to the 2 fake fields, you need autocomplete="off" in your form element. This is hilarious :) – Mattijs
1 upvote
  flag
@roughcoder what autocomplete=false did not make it work. Its the same as autocomplete=off, chrome doesnt care – artdias90
3 upvote
  flag
This poses a huge and serious security exposure. Any site can harvest usernames and passwords, ip addresses from the client, and a host of other _SERVER variable info. I just proved it on my site by looking at the _POST vars submitted. And I thought Google was smart. Fooled me. – H. Ferrence
upvote
  flag
This is both the most effective way but the worse hackish way. It's how the web works: not good job, clean job. No. Hacks, hacks, hacks, hacks, hacks, hacks, hacks, hacks. I'm fed up with that. – Olivier Pons
1 upvote
  flag
It looks like this just stopped working in Chrome v48.0.2564.82 m – Victor F
4 upvote
  flag
Yes it stopped working - it's like an arms race. I solved it with: <div style="height:0; overflow: hidden;"> <input type="text" name="fakeusernameremembered"> <input type="password" name="fakepasswordremembered"> </div> – Adam Jimenez
1 upvote
  flag
@AdamJimenez, the problem with your solution is that a person can Tab into the invisible field, which is not a good thing. I got it working with solution by hyper_st8 below. – Victor F
upvote
  flag
@VictorF Ahh, thanks for the heads up I will use that also. It's like an arms race! – Adam Jimenez
upvote
  flag
@mikenelson: any idea why the solution (fakeusernameremembered) works? – Stijn Geukens
1 upvote
  flag
Small comment: I've noticed it only works if the fields were AFTER my real fields (ie Chrome was taking the last field to autofill) – Liorsion
4 upvote
  flag
@Liorsion So that worked for me, until I updated to v49 today. It seems like they reverted back to only working if you put it before the real fields. Can't seem to win. Not sure what is up with their developers constantly f'ing with this. People complain about IE, but man, they are making themselves look just as bad. Anyway I've now added these fake fields to before and after the real fields – ymerej
2 upvote
  flag
This appears to be broken now on version Version 49.0.2623.110 m. Testing: cleared all passwords for the domain, logged in on one form and saved the password, went back to my create account form and the fields were filled in and the hidden fields were still there. Chrome is painful! – Colin Wiseman
1 upvote
  flag
This worked for me, but only after I named the fields the same as the existing fields (name="email" / name="password"). It made no difference where the fake fields are in the form (I placed them at the top). Input type also doesn't seem to matter (works with no type tag). My Chrome version is 50.0.2661.102 m. – Ixalmida
upvote
  flag
I concur with @Ixalmida - there have been changes to Chrome and the style="display:none" trick now only works if you use the correct input name (e.g. name="email"). You don't need a password field, it seems. – rybo111
upvote
  flag
If I add the two hidden fields above, Chrome fills it in and then carries on and fills all the rest in as well! Wtf Chrome – Jack Nicholson
2 upvote
  flag
This does not work. Use autocomplete="new-password" (//allinonescript.com/a/30976223/1438029). Verified works in Version 51.0.2704.79 m. – Geoffrey Hale
3 upvote
  flag
July 20 2016, neither this nor new-password are working for me on mobile for a non password field. Tried matching name, putting hidden fields both before and after, and JS hack. Chrome 51.0.2704.81 – dlsso
upvote
  flag
It doesn't work anymore – gozizibj
1 upvote
  flag
@tibalt answer is the correct one as of 8/2016. – cchamberlain
upvote
  flag
Doesn't seem to work in Chrome 56 – Artur Beljajev
1 upvote
  flag
It stinks that there is not a better solution than this... (no offense to you @mikenelson) offense to google chrome. – Travis Tubbs
4 upvote
  flag
This stopped working for me as of Chrome 56. It started autofilling passwords for non-matching field names. Changed both inputs from style=display:none to style="visibility:hidden;height:0;width:1px;position:absolut‌​e;left:0;top:0". Thanks to @digital_flowers and @CodeSimian answers. – Brian Chance
upvote
  flag
Stopped working on Chrome 56.0.2924.87 . But the autocomplete="off" on the input worked. – Sajjan Sarkar
upvote
  flag
the fake fields need to be after your real user/psw fields in dom - works in any browser (win & mac) for me. – Mayrhofer
2 upvote
  flag
NONE of these solutions, whether it's an answer or something in the comments, are working for me as of Chrome 59. Does anyone have any other suggestions? – jtate
upvote
  flag
Having problems with Chrome 59 as well. – Victor Soto
2 upvote
  flag
I was able to get this working again. style="height:0px; opacity:0" – The Lazy Coder
upvote
  flag
Tried this in Chrome 60 and doesn't appear to work :(, feels like IE hacking all over again... – Mike Purcell
upvote
  flag
This doesn't work in Chrome 61 as well. Has anyone found any solution to this? – Yuvraj
1 upvote
  flag
Not working in Chrome 62 as well – Aakash Martand
upvote
  flag
Thanks for the pointer of "a password field and the field before it" - worked out, when i changed the input so it was no longer a password field.. The users will have to suffer the inconvenience of seeing their new password, but at least I don't have to implement a password/confirmpassword pair :) – Caius Jard

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');
}
1 upvote
  flag
this solution work for me – Hayu Rahiza

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.

<input type="password" style="display:none;">
2 upvote
  flag
While quite horrible for anyone who likes clean markup (or text readers), this does trick Chrome into working nicely again – Tominator
upvote
  flag
Valid point one that I had not considered. Hopefully chrome adjusts this feature to be a little more keen on how they fill fields. – vikingben
upvote
  flag
This is the only thing that worked for me. +1 – Stefan
upvote
  flag
This is my favorite solution. +1 – lightyrs
upvote
  flag
This doesn't work with Safari on a Mac. – RHPT
upvote
  flag
Does not seem to work anymore. Chrome now seems to fill all existing password fields on the page. – BlaM
1 upvote
  flag
+1 I always enjoy reading out of the box solutions. Unfortunately BlaM is correct as this method no longer works on chrome. – Adam Joseph Looze

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

<form autocomplete="off"> and <input autocomplete="off"> 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:

<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="" />

Hope it will help someone.

upvote
  flag
This doesn't work well for me: chrome still autofills the password field visibly, while the username is indeed hidden. – Tominator
upvote
  flag
yes its not for password its for user name if you need password too try to create a password fake field too.check my edit – Jobin Jose
1 upvote
  flag
This one worked for me (for now). I have found that I have used about a half dozen different hacks over time, and after a while Chrome decides it wants to defeat that hack. So a new one is needed, such as this one. In my application, I have a profile update form with email and password fields that are to be left blank unless the user wants to make changes. But when Chrome autofills, it puts the userid in the "email confirmation" field, resulting in all kinds of error conditions, that lead to further error conditions, as the user flounders about trying to do the right thing. – Jeffrey Simon
2 upvote
  flag
A quick explanation as to why this hack works (for now): Chrome sees the first type=password input and autofills it and it assumes that the field directly before this MUST be the userhame field, and autofills that field with the username. @JeffreySimon this should explain the phenomenon of userid in email confirmation field (I was seeing the same thing on my form). – MrBoJangles
upvote
  flag
I suspect it won't be long before Chrome figures out how to defeat this hack. Why does Chrome try to hard to prevent a function that should be up to the developer? – Jeffrey Simon
upvote
  flag
This solution no longer works: jsbin.com/lugavepaya/edit – kentcdodds
1 upvote
  flag
@kentcdodds - not sure what you mean about no longer working. Your jsbin does not have a password field so is a different situation. I've been using this solution for years and most recently I noticed it was needed and it worked for me just last week (March 2015). – mike nelson
1 upvote
  flag
Hooray! A solution that seems to work! I would advise giving the field the name password and having actual_password for the legitimate field, as Google now seem to be looking at the name. However, this means Chrome won't then save the password, which is the functionality I actually want. AAAAARRRRGHH! – rybo111
2 upvote
  flag
Update: This continues to work over a year since the last time I implemented it. We may have a solid winner here. – MrBoJangles
1 upvote
  flag
Yes, this is the only that works in Chrome – Toolkit
upvote
  flag
I used this for city/country autofilling. had to have 3 hidden input fields for it to work before my actual fields: prevent_autofill, fake_city AND fake_country – Clay
upvote
  flag
wow Chrome, you surprise me, is there some bug submitted or whatever? – Toolkit
upvote
  flag
this doesn't work in the latest Chrome (48.0.2564.109). when the fake input is visible, it captures the autofill, but when it's hidden via display none - it doesn't. I tried to absolutely position the fake input and give it 0 width and height, also doesn't work. The only way I managed to make it work is with height of 1px. – scebotari66
upvote
  flag
<form autocomplete="off"> worked for me in Chrome 50something – Urs
1 upvote
  flag
Using this approach I found that Firefox would still autofill the hidden fields, which would then be posted along with the rest of the form when submitting. Something that is not desirable with your credentials. Adding maxlength="0" prevents that. – Mikal Schacht Jensen

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

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

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.

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

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 .

always works

jQuery(document).ready( function($) {

    $(window).load( function(){

        $('input').val( ' ' ); setTimeout( function(){ $('input').val( '' ); }, 20 );

    });

});

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

 <input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

(focus = at mouse click and tabbing through fields)

Update: Mobile Safari sets cursor in the field, but does not show virtual keyboard. New Fix works like before but handles virtual keyboard:

<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();  }" />

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. Update: Pure JavaScript, no need for jQuery.

7 upvote
  flag
what a great fix :) you should replace jquery with this: this.removeAttribute("class") – Roey
upvote
  flag
Thanks Roey. I updated the snippet. – dsuess
upvote
  flag
I used this to stop a dropdwonlist from being autofilled. But also restyled readonly so it didn't look it. Cool idea! – ComfortablyNumb
3 upvote
  flag
This solution no longer works: jsbin.com/sobise/edit – kentcdodds
upvote
  flag
@kentcdodds: Chrome update: Google released Chrome v41 on March 19th, but I can not find any specific note in their change log. Please specify your comment: The initial question was, how to prevent Chrome from filling saved values to wrong field names. How does your example code behave? In your example I notice 3x text-input fields, without name attribute and no surrounding form tag. – dsuess
upvote
  flag
In Chrome, the readonly attribute trumps the required attribute on an input which breaks client side validation. – Clint
upvote
  flag
@Clint: My code snippet above removes the readonly attribute as soon as the user enters the field (per mouse click or tab key). I guess, you refer to a field, which is auto fill protected, but not touched by the user. What is this field purpose - and does it really need to be protected? Depending on the scenario, removing all readonly attributes on submit may be an option. Can you add a more specific comment on your issue? Maybe I can help you out :) – dsuess
upvote
  flag
This is not an elegant solution, using bootstrap the field is styled as a readonly input but this is not one. – Loenix
upvote
  flag
upvote
  flag
@Loenix: your sample is about a different answer and uses autocomplete="off", while my solution is about the readonly attribute. Btw. I guess there is a little typo in the fiddle you listet. The event listener $(this).one("focus... should likely be $(this).on("focus.... Kind regards, dsuess – dsuess
upvote
  flag
@dsuess This script apply the readonly solution on a field with autocomplete="off". It uses one jQuery method to apply event only one time, because after the first focus event, the readonly attribute is already removed (here i respect jQuery standards, we should edit the property and not the attribute). api.jquery.com/one – Loenix
upvote
  flag
If you're using JavaScript. why not just set the value to dummy and then remove the value again? Adding and removing readonly sounds like a hazardous move - what if the browser doesn't want you to focus on it? – rybo111

Here's a dirty hack -

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

<input type="text" name="test" id="test" disabled="disabled" />

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

<script>
    setTimeout(function(){
        document.getElementById('test').removeAttribute("disabled");
        },100);
</script>

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

Problem

HTML

<div class="form">
    <input type="text" placeholder="name"><br>
    <input type="text" placeholder="email"><br>
    <input type="text" placeholder="street"><br>
</div>

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

<div class="form">
    <input type="text" required="required">
    <label>Name</label>  
    <br>
    <input type="text" required="required">
    <label>Email</label>    
    <br>
    <input type="text" required="required">
    <label>Street</label>    
    <br>
</div>

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/

upvote
  flag
This is the only solution that actually works. I really don't like it, but that's the crummy state we're in right now :-( – kentcdodds
upvote
  flag
As of 2017, this one still works fine. It just needs this script to force input focus if the user clicks on the "fake" placeholder : $("label").on("click",function(){ $(this).prev().focus(); }); Note that the label cannot be before the input... Chrome finds it! Nice creative solution! +1 – Louys Patrice Bessette

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

<input readonly onfocus="this.removeAttribute('readonly');" type="text">

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

upvote
  flag
Unfortunately, this no longer works :-( jsbin.com/sobise/edit?html,css,output – kentcdodds

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

<input type="text">

followed by:

<input type="password">

Simply break this process by invalidating this:

<input type="text">
<input type="text" onfocus="this.type='password'">
upvote
  flag
Unfortunately, this applies to more than just username/password type things. Chrome will look at the placeholder text to infer what to suggest. For example: jsbin.com/jacizu/2/edit – kentcdodds
upvote
  flag
It is valid that you will still be able to fill the fields with browser suggestions as your example demonstrates, so this doesn't really address the OPs issue. This solution, just prevents the browser from "automatically" populating username and passwords combos as in the example by the top answer. This may be of use to some, but is not an end-all solution to just disabling autocomplete, that will have to come from Google. – Bernesto
3 upvote
  flag
Although, if you add a space in front of your placeholder text it will disable the auto-suggest based on placeholder too. Definitely a hack, although no more so than the other suggestions. jsbin.com/pujasu/1/edit – Bernesto
upvote
  flag
I'll up-vote that comment a million times. Thank you! – kentcdodds
upvote
  flag
actually... it seemed to work for your example, but for some reason it's not working for me :-( – kentcdodds
upvote
  flag
Ha! That's why it's called a hack... Do you have an example you can share where it's not working? – Bernesto
upvote
  flag
This works great @Bernesto thank you! – NiCk Newman
upvote
  flag
Great this is the only one that worked on v49 for me Thanks – Liam
upvote
  flag
This works as of Version 51.0.2704.79 m, thanks! – phamous
upvote
  flag
This didn't work as of Version 60. Chrome actually autoselects the first password from the list (along with matching email / name) when focus occurs. :( – Mike Purcell

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.

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!

upvote
  flag
You saved my day! – Freddy Boucher
upvote
  flag
Beautiful, thank you! – John Hamelink
upvote
  flag
It does work very well Aaron, in all major browsers ;) – Kaszoni Ferencz
upvote
  flag
Thanks sidonaldson ;) – Kaszoni Ferencz
6 upvote
  flag
Worked for me! But there is one important remark: I have 5 fields in my web page: Name, Address, Zip code, Phone and Email. When I included autocomplete='false' on the Form and on the Name field, it still worked. However, when I included the autocomplete='false' also on the Address field, it finnally stopped autofilling them! So, you need to put the autocomplete property not on the login or name field, but on the following fields too! (Worked on Chrome 43.0.2357.81 as of 2015-05-27) – Dvd Franco
21 upvote
  flag
IF THIS DOES NOT WORK FOR YOU: Keep in mind that there are 2 ways Chrome "helps" users. AUTOCOMPLETE will prompt based on previous submission in the same form filed and will affect people who are using the form more than once. Autocomplete is disabled with autocomplete="off". AUTOFILL will prompt based on the address book from previously filled out similar forms on other pages. It will also highlight the fields it is changing. Autofill can be disabled with autocomplete="false". – genkilabs
2 upvote
  flag
This doesn't work for me (Version 43.0.2357.124 m). This was probably an oversight by Google, which has now been resolved. They seem to be thinking "the user is always right" in that they want to autofill everything. The problem is, my registration form saves the user data just like the login form does, which is most definitely not what the user wants... – rybo111
upvote
  flag
It didn't work for me too – kabirbaidhya
2 upvote
  flag
YEP It works in Chrome 43.0.2357!! this behaviour in Chrome is so annoying, and this workaround took me a while to figure out. Thanks for your answer. – Adriano Rosa
upvote
  flag
It might not work on old browsers, base on a old 2005 post from Scott Hanselman's blog: hanselman.com/blog/… – DestyNova
upvote
  flag
I would not recommend this solution. Setting autocomplete to "false" works in Chrome but FireFox ignores it. – Noel Abrahams
upvote
  flag
Noel Abrahams, the question here was about Chrome and not about Firefox! – Kaszoni Ferencz
1 upvote
  flag
chrome 43.0.2357.81 works with autocomplete="off" – x0x
2 upvote
  flag
doesnt work with Chrome 44.0.2403.157. How can this feature work and not work with different versions. It is ridiculous – Mattijs
1 upvote
  flag
This solution briefly worked, I guess. Not so much anymore. At least, not in our angular site. – MrBoJangles
upvote
  flag
See my answer here for a reliable workaround: //allinonescript.com/questions/12374442/… – J.T. Taylor
upvote
  flag
This resolved my headache, magically! – woobione
1 upvote
  flag
using v.46 and this solution no longer works – Graham T
upvote
  flag
@GrahamT Might want to check your code, I just updated to 46.0.2490.80 m and it works. – The Muffin Man
8 upvote
  flag
Not working on Chrome 46.0.2490.80 m – Toolkit
upvote
  flag
@Toolkit Works for me on Chrome 46.0.2490.80. I think it's something other than browser version that's the problem. – dlsso
1 upvote
  flag
I tried autocomplete="false" and didn't work on Chrome 47.0.2526.106... However when I use: autocomplete="off" in the "form" tag as well as in every "input" tag that works great! – captain theo
1 upvote
  flag
autocomplete="<anything but on or off works>" – swapab
upvote
  flag
I tried all the previously mentioned fixes and none worked for me on Version 47.0.2526.111 (64-bit) – Tom Rossi
upvote
  flag
This actually killed the entire form autofill options not just the field for me. – David

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.

upvote
  flag
It worked with little modification, $timeout(function() { element.val("") }, 300) – Mohammad Walid

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:

<input type="text" name="email" class="focus-select" value="your@email.com">
<input type="password" name="password" class="focus-select" value="password">

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:

<!-- Avoid Chrome autofill -->
<input name="email" class="hide">

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.

upvote
  flag
Great solution (option 2), worked for me. Thanks. – AlexioVay
upvote
  flag
@Vaia - have you tried navigating to another page and then pressing the back button? I get mixed results - it may need tweaking. – rybo111
upvote
  flag
I haven't tried option 1 if you mean that. Also I just needed to disable the autofill on an ajax-loaded modal that won't be called with the back button. But if there will be other results, I'll tell you. @rybo111 – AlexioVay
upvote
  flag
@Vaia I meant option 2 - please reply here if you encounter any problems. Thanks. – rybo111

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://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7

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

59 upvote
  flag
'new-password' worked for me after trying 'off' and 'false' – Kevin
3 upvote
  flag
Worked on Chrome V 44, see documentation here: developers.google.com/web/fundamentals/input/form/… – Anas
11 upvote
  flag
This is the only working fix now. False, and off, do not work anymore. Should be the correct answer now. – David
3 upvote
  flag
Works for Version 44.0.2403.130 m - only thing that worked for me! – Rob Scott
2 upvote
  flag
This does not work for me, chrome still auto fills lastname and password for new accounts. chrome is ignoring autocomplete attribute. – John Little
upvote
  flag
doesn't work in Chrome – Toolkit
upvote
  flag
It worked for me but you have to assign it to a specific input element. It will not work if you apply this to the <form> element. – www139
3 upvote
  flag
Seems not working in Chrome 48.0.2564.103 – tano
1 upvote
  flag
Works 100%. Simple and effective. Thank you so much, tested on 50.0.2661.94 m – MrFabio
upvote
  flag
Unfortunately Chrome then asks the user to save the changed password when the form is submitted/hidden. – sibbl
upvote
  flag
Works in Version 51.0.2704.79 m – Geoffrey Hale
upvote
  flag
Not working for me (on mobile, non-password field). Shows up as autocomplete="off" in the HTML, which of course doesn't work. – dlsso
upvote
  flag
Worked perfectly on Chrome 51.0.2704.103 m (64-bit) – Terkhos
1 upvote
  flag
It prevent autofill, but how to disable autocomplete for password field – gozizibj
3 upvote
  flag
Not working in my Chrome 52. – Daniel
upvote
  flag
@Daniel, works in Version 52.0.2743.116 (64-bit) on macOS (10.12 Beta (16A304a)) - At least for me. – Eax
2 upvote
  flag
After 2 hours trying other suggestions this works! Chrome 54.0.2840.71 – Deminetix
2 upvote
  flag
The reason this works is because the chrome team are trying to create recommended autocomplete values, as shown @ developers.google.com/web/fundamentals/design-and-ui/input/… The "new-password" value is one of the few that have additional logic surrounding it, and in this case, its to suspend autofill but still allow autocomplete suggestions – Deminetix
upvote
  flag
Setting autocomplete="new-password" is the only thing that worked for me. – Kevin Haag
upvote
  flag
This answer works for me **** 6/5/2017 *** Version 58.0.3029.110 (64-bit) – Programmer
1 upvote
  flag
This did not work as of 8.30.2017 Version 60.0.3112.113 (Official Build) (64-bit) – Mike Purcell
upvote
  flag
For react: autoComplete="new-password" – Oliver Lloyd
1 upvote
  flag
Not working as of 1.13.2018 Version 63.0.3239.132 (Official Build) (64-bit) – PellucidWombat

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.

For what it's worth, I wrote a jQuery plugin (albeit pretty heavy handed) that prevents Chrome from triggering autofill on form fields.

GitHub -> jquery.prevent-autofill.js

It uses similar techniques to the ones described by Yared Rodriguez in his answer. Basically, binds to events on the input and processes them manually so as to hide them from Chrome's autofill trigger.

I wrote it to ensure that autofill was turned off for a project I'm working on that had it as a hard requirement. The project contains a form for personal data (including address) that is intended to be used on a shared computer, so autofill was a pretty serious problem for us.

I tried pretty much everything else that was suggested, and Chrome ignored it all. As soon as my form contained all of the standard address fields, (name, address, city, state, postal), Chrome would ignore any and all "autocomplete" attributes that I had set, regardless of value (off/false).

My problem was further complicated because I have field names and placeholders, both of which seem so be picked up by Chrome's autofill heuristic.

If it helps someone, great. If you think it's a terrible hack, that's fine too. I just spent a week pulling my hair out trying to get Chrome to behave, and this worked for me so I thought I'd share.

upvote
  flag
Thanks for sharing this, however it doesn't work as of today unfortunately.. – phamous

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" & 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.

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');

Enter a value of ' ' (a blank space) for the username field.

<input type = 'text' value = ' ' name = 'username' />

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'

I've faced same problem. And here is the solution for disable auto-fill user name & password on Chrome (just tested with Chrome only)

    <!-- Just add this hidden field before password as a charmed solution to prevent auto-fill of browser on remembered password -->
    <input type="tel" hidden />
    <input type="password" ng-minlength="8" ng-maxlength="30" ng-model="user.password" name="password" class="form-control" required placeholder="Input password">
upvote
  flag
strange fix but somehow that's the only thing that works for me on chrome 48 :) – Jacka

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.

I've found that adding this to a form prevents Chrome from using Autofill.

<div style="display: none;">
    <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

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.

upvote
  flag
It's not really the fact that you say PreventChromeAutocomplete. I was able to get autocomplete to work by saying autocomplete="off" and name="somename". But this only works if you name two different inputs the same name. So in your case PreventChromeAutocomplete must have been applied to two different inputs. Very strange... – Joe Heyming

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.

<style>.stylish { position:absolute; top:-2000px; }</style>
<input id="_____fake_email_remembered" class="stylish" tabindex="-1"  type="email" name="email_autofill"/> 
<input id="_____fake_userName_remembered" class="stylish" tabindex="-1"  type="text" name="userName_autofill"/>
<input id="_____fake_firstName_remembered" class="stylish" tabindex="-1"   type="text" name="firstName_autofill"/>
<input id="_____fake_lastName_remembered" class="stylish" tabindex="-1"   type="text" name="lastName_autofill"/>
<input id="_____fake_phone_remembered" class="stylish"  tabindex="-1"  type="text" name="phone_autofill"/>
<input id="_____fake_address_remembered" class="stylish"  tabindex="-1"   type="text" name="address_autofill"/>
<input id="_____fake_password_remembered" class="stylish"  tabindex="-1"   type="password" name="password_autofill"/>
<input id="_____fake_password_remembered2" class="stylish"  tabindex="-1"   type="password" name="passwordRepeated_autofill"/>
upvote
  flag
This is something that actually worked for me after other attempts. I am using Chrome 50. – agarcian

This is what work for me as for December 2015

Putting autocomplete="false" on the form element means nothing to Chrome. If you want this to work, you have to put in the the specific element you want this feature to be turned off. I.E.

<input id="state" type="text" name="state"
 autocomplete="false">

That's working like a charm to me after trying everything!

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.

enter image description here

edit: In case off isn't working then try false or nofill. In my case it is working with chrome version 48.0

upvote
  flag
"off" isnt working, it must be "false" – itinance
upvote
  flag
it is related to google chrome – mumair

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:

<input type="password" class="hidden" />
<input type="password" />
upvote
  flag
This is genius. – Michael Robinson
1 upvote
  flag
This won't work anymore. – Neeson.Z
upvote
  flag
The comments are hilarious... this work, then someone negates that... Never seen something like this – Miguel

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='<value>' on your inputs, where <value> 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

upvote
  flag
Didn't work for me – OverMars

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 <input>, but also at associated <label> 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 <span> in the middle, e.g. for a city (it's messing with my Places autocomplete):

<span>Ci<span style="display:none">*</span>ty</span>

Full working example:

<!DOCTYPE html>
<html>
  <body>
    <form method="post" action="/register">
      <div>
        <label for="name">Name</label>
        <input id="name" type="text" name="name" />
      </div>
      <div>
        <label for="email">Email</label>
        <input id="email" type="text" name="email" />
      </div>
      <div>
        <label for="id1">City</label>
        <input id="id1" type="text" name="id1" /> <-- STILL ON :(
      </div>
      <div>
        <label for="id2">Ci<span style="display:none">*</span>ty</label>
        <input id="id2" type="text" name="id2" /> <-- NOW OFF :)
      </div>
    </form>
  </body>
</html>

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;}

<input type ="text" class="secure-font">

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.

upvote
  flag
Thank you! This is the only thing that works in chrome 49. Previous methods broke as chrome seems to fill all inputs with type="password" now. – epelc

Unfortunately none of the solutions seem to work. I was able to blank out email (username) using

                    <!-- 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"/>

technique, but password still populates.

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.

<label for="searchAddress" class="control-label"> Street Address <input type="text" class="form-control" name="searchAddress></label>

Chrome detects keywords within the label to figure out the input type. It likely does this with other key words as well.

If you are implementing a search box feature, try setting the type attribute to search as follows:

<input type="search" autocomplete="off" />

This is working for me on Chrome v48 and appears to be legitimate markup:

https://www.w3.org/TR/html-markup/input.search.html

1 upvote
  flag
Omg, thanks so much, only this worked for me <3 – George Garchagudashvili

It is so simple and tricky :)

google chrome basically search for every first visible password element inside the <form>, <body> and <iframe> 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 <form> tag you need to put the dummy element as the first element in your form immediately after <form> open tag

    • if your password element not inside a <form> tag put the dummy element as the first element in your html page immediately after <body> open tag

  1. You need to hide the dummy element without using css display:none so basically use the following as a dummy password element.

    <input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>
    
upvote
  flag
Great work, how did you find out the algorithm of Chrome? I just found out that my old method changing the value with JS after the page has been loaded with a setTimeout timer doesn't work anymore. But this works perfect! – user3973556
upvote
  flag
thanks it was by trials :) – fareed namrouti
upvote
  flag
Unfortunately, does not work for regular TextBox inputs. – eYe
upvote
  flag
actually it is working just set the name property ;) – fareed namrouti
1 upvote
  flag
Fantastic, works with Chrome v50.0.2661.75. – Tom Regan
upvote
  flag
On Chrome 58 this does not work. Use width:1px. If the password field is completely hidden, then Chrome autofills it normally. Also z-index:-999 could be useful so it does not overlap any content. – xtiancastro7

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.

<input type="text" id="password" name="password" />

<script>
    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.
</script>

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.

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.

                    <input id="FakePassword" type="password" style="float:left;position:relative;height:0;width:0;top:-1000px;left:-1000px;" />

I don't know why, but this helped and worked for me.

<input type="password" name="pwd" autocomplete="new-password">

I have no idea why, but autocompelete="new-password" disables autofill. It worked in latest 49.0.2623.112 chrome version.

upvote
  flag
It doesn't work in Version 50.0.2661.86 (64-bit) – Oleg Matei
upvote
  flag
Updated my chrome, and still it does work for me. 50.0.2661.87 (64bit) – Tauras
upvote
  flag
Unfortunately, when submitting the form (or when the input fields are hidden/removed), Chrome then asks to save the changed login. – sibbl
upvote
  flag
Works in Version 51.0.2704.79 m – Geoffrey Hale
6 upvote
  flag
upvote
  flag
holy f*** why this works? is that a bug? because i tested it here and place it only in one input and worked for both input login and password, but i put it only in the password – Leandro Ruel
upvote
  flag
I have no idea. I think thats a chrome "thing" which was made by developers. Maybe i am mistaken. – Tauras
upvote
  flag
This worked for me! – Ikbel
upvote
  flag
The only solution that works! – DR.Somar
upvote
  flag
it's not autocompElete wasted my time XD – user1928596

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:

<input style="width:0;height:0;opacity:0;position:absolute;left:-10000px;overflow:hidden;" type="text" name="fakeusernameremembered"/>
<input style="width:0;height:0;opacity:0;position:absolute;left:-10000px;overflow:hidden;" type="password" name="fakepasswordremembered"/>

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.

<input name="dpart" disabled="disabled" type="password" style="display:none;">
<input name="dpart" type="password">
<input type="submit">
upvote
  flag
That's the only thing that works for me, thanks! – AlexioVay
upvote
  flag
As for June of 2016 and Chrome 51.0.2704.106 m this is the only working solution over here – Denis
upvote
  flag
But will the form select the right (visible) input field you need then? Because it's the same name. – AlexioVay
upvote
  flag
@Vaia, adding the disabled attribute to the duplicate element will prevent it from being submitted. – mccainz

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:

<input type="password" autocomplete="new-password" 
style="visibility:hidden;height:0;width:1px;position:absolute;left:0;top:0">`

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.

upvote
  flag
This solution worked because it does two things: 1. prevents chrome from displaying the 'use password for' under the real password field and 2. prevents chrome from asking you if you want to save the updated password (since the hidden password field which is marked as 'new-password' has no value) – danjarvis
<input readonly onfocus="this.removeAttribute('readonly');" type="text">

adding readonly attribute to the tag along with the onfocus event removing it fixes the issue

For me, simple

<form autocomplete="off" role="presentation">

Did it.

Tested on multiple versions, last try was on 56.0.2924.87

upvote
  flag
This doesn't work for me (53.0.2785.116). – Mike Rockétt
3 upvote
  flag
It finally stopped that s*it from popping out, thanks @kuf you made mine a better day! – phaberest
upvote
  flag
Does not work... you should put what version work... – Arnold Roa
upvote
  flag
@ArnoldRoa version added, it's been on our site since the day I've posted it and had few versions where it worked fine. which version are you using? PC/Mac? – Kuf
upvote
  flag
Not working on 57.0.2987.110. Chrome highlights it yellow and prefill the field with my saved password. But the page is a user management page, not login page. – Dummy
upvote
  flag
@Dummy I tested it now on chrome latest (57) and it's still working for me. Did you do anything special with the input fields? cap you put your code somewhere I could try to reproduce? – Kuf

On Chromium 53.0.2785.92 (64-bit) the following worked

<div style="visibility:hidden">
    <input type="text" name="fake_username_remembered">
    <input type="password" name="fake_password_remembered">
</div>

display:none doesn't work

I am using angular2 which modifies a form and solution with simple display: none is not working here. I used alternative solution:

<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="position: absolute; top: -10000px" type="text" name="fakeusernameremembered"/>
<input style="position: absolute; top: -10000px" type="password" name="fakepasswordremembered"/>

try whit a blank space in the value :

<input type="email" name="email" value="&nbsp;">
<input type="password" name="password" value="&nbsp;">

chrome 54.0.2840.59

upvote
  flag
Hey, that worked! :) – Vincent Hoch-Drei

You have to add this attribute :

autocomplete="new-password"

Source Link : Full Article

upvote
  flag
Do you have any sources how to figure this out? – AlexioVay
upvote
  flag
Works, but is not semantic as can be used on username and other fields. – Robin
upvote
  flag

Since display none doesn't seem to work anymore add the

<input type="text" name="fakeusernameremembered"/>
<input type="password" name="fakepasswordremembered"/>

inside a div with overflow hidden, max-width & max-height 0px

So it becomes something like:

<div style="overflow: hidden; max-width: 0px; max-height: 0px;">
    <input type="text" name="fakeusernameremembered"/>
    <input type="password" name="fakepasswordremembered"/>
</div>
upvote
  flag
This does not work, both inputs, fake and new are yellow-autocompleted :( – Arnold Roa
upvote
  flag
still works for me though, can you give some more details about what you are doing? Also: did you put the div with hidden inputs before the visible ones? – Michael

You can simply set value=" " . this will empty your inputs! something like this:

<input type="text" value=" ">

i tried many of the solutions , it seems like Google updates may have changed, as of JAN 2017 the solution that worked for me was adding another input and hiding it after its been populated.

 <input type="text" id="phone_number" name="phone_number" value="">
 <input type="text" id="dummy_autocomplete">


script type="text/javascript">
        $('#dummy_autocomplete').hide();
</script>

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:

<!-- form is initially hidden, password field has a dummy id and a class 'id' -->
<form id="loginForm" style="display:none;">
   <span>email:</span><input type="text" placeholder="Email" id="loginEmailInputID"/>
   <span>Password:</span><input class="loginPasswordInput" type="password" placeholder="Password" id="justForAutocomplete"/>
</form>

page load:

function hideAutoComplete(formId) {
    let passwordElem=$('#'+formId+' input:password'), prev=passwordElem.prev();
    passwordElem.remove();
    prev.after($('<input type="password" style="display:none">'), passwordElem.clone().val('').removeAttr('id'));
}

if (!allowAutoComplete) hideAutoComplete('loginForm');
$('#loginForm').show();

when you need the password:

$('.loginPasswordInput').val();

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:

....
->add('field-name', TextType::class, array(
  'attr' => array(
      'autocomplete' => 'off'
  )
)
....

Rather than:

....
{{ form_widget(form.field-name, {'attr': {'autocomplete':'off'}})
....

I finally solved this by putting in a non duplicate variable in the input field - i used php time() like this:

<input type="text" name="town['.time().']" >

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.

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);
            });
});

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 ?

<style>
    @@font-face {
      font-family: 'password';
      font-style: normal;
      font-weight: 400;
      src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/password.ttf);
    }
</style>

<input type="text" name="@Model.UsernameRandomNameString" />
<input style="font-family: 'password'" type="text" name="@Model.PasswordRandomNameString" />

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.

Chrome latest versions ignore the autocomplete=off, It's still possible to turn off autocomplete with a "--disable-ignore-autocomplete-off" :

<input type="text" name="mytext" --disable-ignore-autocomplete-off" autocomplete="off">

or :

<form method="" name="myform" --disable-ignore-autocomplete-off" autocomplete="off">
1 upvote
  flag
You obviously never tried it yourself – Nezo

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;
}

<input type="text" name="username" class="hidden-fields"> 
<input type="password" name="password" class="hidden-fields">

<your actual login fields></your actual login fields>
upvote
  flag
In my case I need only , tested Chrome v63 <input type="password" name="password" class="hidden-fields"> – Palaniichuk Dmytro

Answer of Jobin Jose gave me a start. Here is what works for me:

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

Be sure to not have autocomplete="off", which spoils the solution.

upvote
  flag
This works for me as of 1.13.2018 Version 63.0.3239.132 (Official Build) (64-bit) – PellucidWombat

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:

<input type="text" onChange={this.setAttributes} placeholder="Email" />

JS:

setAttr2: function(e){
    var value = e.target.value;
    if(value.length){
      e.target.setAttribute('type', 'email')
    } else {
      e.target.setAttribute('type', 'text')
    }
  }

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 && !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

upvote
  flag
Thanks, this really help me – Fahmi Ramadhan
upvote
  flag
you're welcome ;) – MagicSux

Pure HTML solution:

(No javascript needed, no css needed and no hidden inputs needed)

<form autoComplete="new-password" ... >
        <input name="myInput" type="text" autoComplete="off" id="myInput" placeholder="Search field" />
</form>

Notes:

  • form does not necessarily need to be the direct parent of the input element
  • input needs a name attribute

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.

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);

do this :

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

 <!--
<input autocomplete="nope"> turns off autocomplete on many other browsers 
 that don't respect
the form's "off", but not for "password" inputs.
   -->
  <input id="real-username" type="text" autocomplete="nope">

   <!--
<input type="password" autocomplete="new-password" will turn it off for passwords everywhere
-->
 <input id="real-password" type="password" autocomplete="new-password">

 </form>
upvote
  flag
I see no point of posting this as an answer as there's already a similar answer with more explanations: //allinonescript.com/a/15917221/4147849 – Muntashir Akon
upvote
  flag
display:none does not work in latest Chrome v63, I 've just styled as noticed above with opacity:0, and only with fake password input <input type="password" name='fake-password' autoComplete='new-password' style={{opacity: 0, float: 'left', height: '0', width: '0'}} /> – Palaniichuk Dmytro

Use css text-security: disc without using type=password.

html

<input type='text' name='user' autocomplete='off' />
<input type='text' name='pass' autocomplete='off' class='secure' />

or

<form autocomplete='off'>
    <input type='text' name='user' />
    <input type='text' name='pass' class='secure' />
</form>

css

input.secure {
    text-security: disc;
    -webkit-text-security: disc;
}
upvote
  flag
what about security? it works but to a good solution – Palaniichuk Dmytro

Works for Chrome v63 latest, if put above all your inputs the fake one. One thing that needs to be resolved is hidden fake input(hidden and none does not work ) Any advice how to hide it better

fake

<input type="password" name='fake-password' autoComplete='new-password' style={{opacity: 0, float: 'left', height: '0', width: '0'}} />

real password

<input type="text" name='username' autoComplete='nope' /> <input type="password" name='password' autoComplete='new-password' />

Not the answer you're looking for? Browse other questions tagged or ask your own question.