Instantly share code, notes, and snippets.

Embed
What would you like to do?
Disable HTML form input autocomplete and autofill

Disable HTML Form Input Autocomplete and Autofill

  1. Add autocomplete="off" onto <form> element;
  2. Add hidden <input> with autocomplete="false" as a first children element of the form.
<form autocomplete="off" method="post" action="">
    <input autocomplete="false" name="hidden" type="text" style="display:none;">
    ...

This formation is going to prevent Chrome and Firefox to offer autofill and autocomplete for all input fields inside the form.

Disable HTML form input autocomplete and autofill

@zanderwar

This comment has been minimized.

Copy link

zanderwar commented Mar 20, 2017

Wrong, false is not an option on autocomplete, all must be off

@Westie

This comment has been minimized.

Copy link

Westie commented Mar 21, 2017

In addition, autocomplete=off is also a nonsense as most browsers refuse to adhere to this - the best way is to make an element [readonly] and then on hover/click/blur/focus, remove [readonly]

@jehzlau

This comment has been minimized.

Copy link

jehzlau commented Oct 9, 2017

+1 to Zanderwar, false is not working. I just tried it now. :D

@Fellach

This comment has been minimized.

Copy link

Fellach commented Oct 13, 2017

@zanderwar, @jehzlau,

please read Turning_off_form_autocompletion, where it stays:

many modern browsers do not support autocomplete="off" for login fields

@RedSparr0w

This comment has been minimized.

Copy link

RedSparr0w commented Nov 17, 2017

@Fellach The link you posted states that they do not support autocomplete="off" for login fields, all other input fields should be fine.

many modern browsers do not support autocomplete="off" for login fields

It also says you should use autocomplete="new-password" for new password fields (can be used in login fields) in order for it to not be auto filled.

If an author would like to prevent the autofilling of password fields in user management pages where a user can specify a new password for someone other than themself, autocomplete="new-password" should be specified, though support for this has not been implemented in all browsers yet.

@WarenGonzaga

This comment has been minimized.

Copy link

WarenGonzaga commented Dec 26, 2017

This is helpful for me... thanks for sharing and also some comments here are helpful!

@eloisetaylor5693

This comment has been minimized.

Copy link

eloisetaylor5693 commented Jan 4, 2018

Using false (or any other string that's not on or off) is a valid workaround. See bug: https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164

@swt83

This comment has been minimized.

Copy link

swt83 commented Jan 12, 2018

I had to use false to get this to actually stop the auto-fill, and I had to do it on each individual form element instead of just the form itself. This is a pretty big problem.

@anik786

This comment has been minimized.

Copy link

anik786 commented Mar 1, 2018

This works, but not the way that you think it does.

Officially it should be: autocomplete="off". However many browsers bizarrely ignore this.

Therefore it's best to just put some random string on the autocomplete section like:

autocomplete="autocomplete_off_hack_xfr4!k"

That's why autcomplete="false" accidentally works.

Note that make sure the autocomplete value for each input is different. Hence the random string at the end. Or else you may get suggestions from fields with the same autocomplete value.

@zhoolu

This comment has been minimized.

Copy link

zhoolu commented Mar 8, 2018

@anik786

Thanks, this worked like a charm, autocomplete="anyrandomstring".

@kcaporaso

This comment has been minimized.

Copy link

kcaporaso commented May 3, 2018

These tricks no longer seem to work in Chrome 66.0.3359.139. I was using autocomplete="nope" and all of a sudden autocomplete is back on those forms. Frustrating, and this is for non-login forms, things like address, city.

@marc-thomas

This comment has been minimized.

Copy link

marc-thomas commented May 14, 2018

autocomplete="random" does not work anymore for type="password" fields - seems to work with type="text" and other field types :(

@thdoan

This comment has been minimized.

Copy link

thdoan commented May 15, 2018

According to MDN, "many modern browsers do not support autocomplete="off" for login fields," in which case I assume the random value hack would also not work (basically modern browsers will just ignore this attribute altogether for login fields).

@kingdonb

This comment has been minimized.

Copy link

kingdonb commented May 30, 2018

@kcaporaso I think that Chrome must have finally relented on their contrarian interpretation of the standard. I'm encountering this issue for the first time, and autocomplete="off" on the form tag seems to work, even in spite of thousands of complaints scattered across every help site on the internet claiming to the contrary.

Thank you for your post, I was beginning to think I was crazy but if I'm right and you're right, then I guess the behavior has been changed by an update within the last month or two.

@hugocruz

This comment has been minimized.

Copy link

hugocruz commented Jun 18, 2018

As @thdoan referenced the MDN article explains more about it.
Most relevant for me was:

In some cases, the browser will continue 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 enforcing non-autocompletion is to assign an invalid value to the attribute, for example:

autocomplete="nope"

Since this value is not a valid one for the autocomplete attribute, the browser has no way to match it, and stops trying to autocomplete the field.

This explains why false works as stated above.

Edit: I'm using Chrome Version 67.0.3396.87 (Official Build) (64-bit)

@benbonnet

This comment has been minimized.

Copy link

benbonnet commented Jun 29, 2018

@kingdonb so then I'll scatter another one here as it looks like the issue is back again, stronger than ever

@jprasmussen

This comment has been minimized.

Copy link

jprasmussen commented Jul 6, 2018

Adding autocomplete="off" to a text input worked for me in Chrome.

@Acidic9

This comment has been minimized.

Copy link

Acidic9 commented Jul 9, 2018

Nothing seems to work for me in Google Chrome..

@Abolfazl

This comment has been minimized.

Copy link

Abolfazl commented Jul 10, 2018

I have tried various options and nothing is working for me in Chrome.

@raphael22

This comment has been minimized.

Copy link

raphael22 commented Jul 17, 2018

So... autocomplete='off' trigger a warning telling me to precise my autocomplete...
autocomplete='false' or another value not in spec does remove the warning but try to autocomplete with previous value known by the input...
This spec is a ****ing mess !

@erik2504

This comment has been minimized.

Copy link

erik2504 commented Jul 25, 2018

It's back again indeed. In v68 it ignores all known workarounds to prevent auto-filling fields.
autocomplete="random-string-here" is broken. The autocomplete="off" gets ignored. Even using the method where you make your fields readonly and remove that attribute on focus doesnt seem to work anymore....

@fschlaef

This comment has been minimized.

Copy link

fschlaef commented Jul 25, 2018

Nothing works. All my search fields retain recently entered values, which is completely idiotic, and tons of developers are looking like idiots for not being able to remove this, all because Google thinks their idea of "user experience" is the best and nobody should question it. Very well done.

@JefferyHus

This comment has been minimized.

Copy link

JefferyHus commented Jul 25, 2018

Since everyone is pissed off by google, maybe this trick can help you around, assign wrong values to autocomplete attribute.
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

@lancegliser

This comment has been minimized.

Copy link

lancegliser commented Aug 1, 2018

I'm currently forced to do a browser specific sniff. If it's chrome, use autocomplete="disabled" which handles both autocomplete and address based autofill (two separate things):

// Weird browser specific hack, because autofill isn't autocomplete
// Chrome demands disabled to turn it off
element.autocomplete = isGoogleChrome() ? 'disabled' :  'off';

For reference, here's the most up to date sniffer I found:
https://stackoverflow.com/questions/4565112/javascript-how-to-find-out-if-the-user-browser-is-chrome

I feel terrible having to do this

@Adavis619

This comment has been minimized.

Copy link

Adavis619 commented Aug 13, 2018

autocomplete="off" works for me in IE, Chrome, and FF.

@MissIrina

This comment has been minimized.

Copy link

MissIrina commented Aug 14, 2018

This worked for me -> autocomplete="anyrandomstring".

@GuiDeto

This comment has been minimized.

Copy link

GuiDeto commented Aug 14, 2018

autocomplete="new-password"

@mitchellurgero

This comment has been minimized.

Copy link

mitchellurgero commented Aug 17, 2018

None of this worked for me so I used (Requires jQuery):

...
<input class="user" type="password" id="pass" class="form-control" placeholder="Account Password" name="password" value="" readonly>
...

<script>
$( document ).ready(function() {
    setTimeout(function(){
        $("#pass").attr('readonly', false);
        $("#pass").focus();
    },500);
});
</script>

Which so far has worked in IE10+, Chrome, Firefox, Safari, etc. (Pretty much every web browser used in this day and age.)

Also works in IE9, but who uses that?!

@imegory

This comment has been minimized.

Copy link

imegory commented Sep 22, 2018

My two cents on this subject: on Chrome, autocomplete="nope" seems to work. Trying autocomplete="off" seems to be ignored by Chrome. I am pretty amazed that this has not been settled at the W3C level.

@IamCharmaineJoy

This comment has been minimized.

Copy link

IamCharmaineJoy commented Sep 26, 2018

autocomplete="off" works for me in Chrome 69 on macOS (Sierra) and safari

@greenjackal

This comment has been minimized.

Copy link

greenjackal commented Sep 28, 2018

A jQuery plugin can solve this problem for all browsers.
https://github.com/terrylinooo/jquery.disableAutoFill

@rubensfernandes

This comment has been minimized.

Copy link

rubensfernandes commented Oct 17, 2018

use autocomplete="anyrandomstring"
And dont use id="password" or id="email", use anything else like id="field1" this should be works!

@chriscooning

This comment has been minimized.

Copy link

chriscooning commented Oct 17, 2018

having to change the name of the id seems very wrong / broken to me - this is especially tedious when you have large forms.
The jQuery plugin is the only thing I've found that works in chrome.

What a shame.

@jbgraug

This comment has been minimized.

Copy link

jbgraug commented Oct 25, 2018

Just remove the name attribute

@CharlyPoppins

This comment has been minimized.

Copy link

CharlyPoppins commented Nov 6, 2018

Nice workaround, thank you :)

@salmanmd786

This comment has been minimized.

Copy link

salmanmd786 commented Nov 14, 2018

Just remove the name attribute

After so many trails, luckily your solution works. Kudos.

@DanNeely

This comment has been minimized.

Copy link

DanNeely commented Nov 21, 2018

The jquery plugin is also preventing the PW from being *ed out by default. That's terrible in a different way.

@mandaputtra

This comment has been minimized.

Copy link

mandaputtra commented Nov 28, 2018

You should updated this gist man, many person googled see this

@dhniels

This comment has been minimized.

Copy link

dhniels commented Nov 30, 2018

The only thing I've been able to get to work is autocomplete="new-password" on each input i want it disabled (see the answer by "tibalt" in this stack overflow post)

only tested on chrome 70 so far.

Is there any "one size fits all" solution for this? This spec seems to be a total shitshow. Dependent on browser, attributes, type, input-only vs. form-wide, mobile vs desktop, etc. Disastrous.

UPDATE: testing on chrome, if I had a name attribute, it breaks. so this only works (in chrome, anyway) if name is not set.

@mariusrazoux

This comment has been minimized.

Copy link

mariusrazoux commented Dec 3, 2018

<input type="text"
      id="search"
      autocomplete="off"
      autocorrect="off"
      autocapitalize="none"
      spellcheck="false" />

works for me without removing the name attr

@lmpampaletakis

This comment has been minimized.

Copy link

lmpampaletakis commented Dec 4, 2018

The thing is to work for passwords too. And when I say work, I mean one solid solution

@stiv-yakovenko

This comment has been minimized.

Copy link

stiv-yakovenko commented Dec 15, 2018

autocomplete="nope" worked for me, autocomplete="off" didn't

@JeanCollas

This comment has been minimized.

Copy link

JeanCollas commented Dec 17, 2018

Feel free to vote and comment on the bugtracker... I did not find any valid solution yet. Once address autofill is enabled, it covers ggle place autocomplete....

https://bugs.chromium.org/p/chromium/issues/detail?id=587466

@cimoskill

This comment has been minimized.

Copy link

cimoskill commented Dec 19, 2018

For me I confirm the best way is plain inline javascript like:
<input type="text" name="email" class="form-control" readonly="readonly" onfocus="javascript: this.removeAttribute('readonly')" />
I added the readonly attribute from start and the onfocus inline js.
I really don't like this kind of things, but I think it's far better than "removing the name attribute" omg.
Incredible issue btw.
Ciao!

@troyanvic

This comment has been minimized.

Copy link

troyanvic commented Dec 19, 2018

for input tag attribute autocomplete should be off, for example <input id="date" type="text" name="date" value="2018/12/19" autocomplete="off" />

@cimoskill

This comment has been minimized.

Copy link

cimoskill commented Dec 19, 2018

@troyanvic yes but that solutions doesn't work on all browsers. I still had all my form with autocomplete="off" and on each input element. That's the central point of this topic. Cya

@NicolayD

This comment has been minimized.

Copy link

NicolayD commented Jan 7, 2019

For me, "off" and "false" don't work but any other string I tried, including "nope", did work.

@danielgary

This comment has been minimized.

Copy link

danielgary commented Jan 15, 2019

Hope this helps, set the autoComplete="nope" on the form element

              <form autocomplete="nope">
@LucasBSC

This comment has been minimized.

Copy link

LucasBSC commented Jan 17, 2019

nope incredibly worked for me lol

@tomheathershub

This comment has been minimized.

Copy link

tomheathershub commented Jan 23, 2019

Same for me! very strange

@CaptainN

This comment has been minimized.

Copy link

CaptainN commented Jan 26, 2019

Why is this still so hard to control in 2019 - what the heck Google?!

None of the options on this page worked for me. I even tried changing the value to:

autoComplete="Chrome, stop autofilling. You don't know better than me. Why have you made this hard?"

This works for now, but I'm sure Google will make it needlessly hard again in a few weeks:

<input style={{ position: 'fixed', left: -1000 }} type="text" name="username" id="username" />
<input style={{ position: 'fixed', left: -1000 }} type="password" name="password" id="password" />

This unfortunately leaves these items in the tab progression, which is not great for accessibility, and demonstrates how Google's attempts to override my decisions as the app developer is counter productive. This should be a simple switch. I want it off.

@MonsterGameDev

This comment has been minimized.

Copy link

MonsterGameDev commented Jan 29, 2019

right now - to prevent both autofill and autocomplete i use autocomplete="off" in the form-tag and autocomplete="xpqrz" on every input then i wont suggest ANYTHING
(Chrome Version 71.0.3578.98)

@WuglyakBolgoink

This comment has been minimized.

Copy link

WuglyakBolgoink commented Feb 10, 2019

FYI: @MonsterGameDev

autocomplete="off" in the form-tag and autocomplete="xpqrz" on every input

Doesn't work on Version Chrome Version 71.0.3578.98 (Form was created in angular@7 App)

@dmausner

This comment has been minimized.

Copy link

dmausner commented Feb 13, 2019

Chrome 71.0.3578.127 (Official Build) (64-bit) under ChromeOS (using a ChromeBook client):
<input id=xxxxx autocomplete=none ...> (not linked to a form, no name attribute) WORKED -- no automatic suggestions.

Assume that "none" is equivalent to a random text value.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment