Skip to content

Instantly share code, notes, and snippets.

@runspired
Created May 23, 2016 13:46
Show Gist options
  • Star 97 You must be signed in to star a gist
  • Fork 14 You must be signed in to fork a gist
  • Save runspired/b9fdf1fa74fc9fb4554418dea35718fe to your computer and use it in GitHub Desktop.
Save runspired/b9fdf1fa74fc9fb4554418dea35718fe to your computer and use it in GitHub Desktop.
How to turn off password and email/username autocomplete.
<!--
<form autocomplete="off"> will turn off autocomplete for the form in most browsers
except for username/email/password fields
-->
<form autocomplete="off">
<!-- 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>
@Bebedee
Copy link

Bebedee commented Jun 11, 2020

Hi @lucacerza

thank you for your reply. We actually can't use jquery since our webserver is restricted. do you have other option?

@lucacerza
Copy link

lucacerza commented Jun 11, 2020 via email

@SajjadLuqman
Copy link

Simple Solution:
Change Textbox Name e.g Password to MyPassword , Email to MyEmail.
Autofill not work...
It's Called Jughar

@Bebedee
Copy link

Bebedee commented Jun 26, 2020

Hi @lucacerza

Sorry for the late response. It didn't work. We are unable to login to our site. It just keeps on refreshing after clicking the submit button. Im going nuts with this problem.

@lucacerza
Copy link

lucacerza commented Jun 26, 2020 via email

@lucacerza
Copy link

lucacerza commented Jun 26, 2020 via email

@Bebedee
Copy link

Bebedee commented Jun 26, 2020

Hi @lucacerza

Yes im trying to stop the autofill of the username and password. But im actullay working on 3 browsers (Google Chrome, Internet Explorer and Firefox).
I tried to use the code below that you sent but it is not working as we are unable to login to the application. Once we click the submit button, the page just keep on refreshing.

  • <script> document.addEventListener("DOMContentLoaded", function(event)

{ document.getElementById("username").autocomplete = "off"; }); </script>
*

I tried the hidden password type input but it is not working on Google Chrome.
I also tried the readonly="" onfocus="this.removeAttribute('readonly');" but it is not working in Internet Explorer.
Seems like i can't find an approach that would work on the 3 browsers that we are using.

Im sorry but is there another option that i can try?

@lucacerza
Copy link

lucacerza commented Jun 26, 2020 via email

@Bebedee
Copy link

Bebedee commented Jun 29, 2020

Hi @lucacerza

No error showed up. Its just keep on refreshing the page.

Let me try the random string and i will give you an update on the result.

Its really difficult to make a work around for this especially if working on different platforms.

@cassiobueno90
Copy link

for me it works:
<input type="text" name="password" onfocus="this.type='password'" />

@Bebedee
Copy link

Bebedee commented Jul 8, 2020

Hi @cassiobueno90

What version of google chrome you are using?

@billywatsy
Copy link

billywatsy commented Aug 26, 2020

for me it works:
<input type="text" name="password" onfocus="this.type='password'" />
thanks for this @cassiobueno90

have you tested this on modern browsers

@cassiobueno90
Copy link

Hi @cassiobueno90

What version of google chrome you are using?

Hi @Bebedee
version chrome: 85.0.4183.83

@sumsv50
Copy link

sumsv50 commented Dec 3, 2020

Thank you very must

@dranitski
Copy link

dranitski commented Dec 9, 2020

this helped me https://stackoverflow.com/a/63989246/10099510

I had the same problem it seems difficult to solve I found a solution To solve the problem the input in initialization must be equal to type="text" and then change to type="password" with the first focus or insert input

function changeTypeInput(inputElement){ 
   inputElement.type="password" 
}
<input type="text"
   id="anyUniqueId"  
   onfocus="changeTypeInput(this)"
   oninput="changeTypeInput(this)"
/>

@hkmaly
Copy link

hkmaly commented Jan 23, 2021

@richlv: I would be completely satisfied if the browser WAITED WITH FILLING THE PASSWORD until user clicks on it.

(Which is actually what Firefox does ...)

@richlv
Copy link

richlv commented Jan 25, 2021

@richlv: I would be completely satisfied if the browser WAITED WITH FILLING THE PASSWORD until user clicks on it.

(Which is actually what Firefox does ...)

Heya, if some browsers don't seem to work satisfactory, it might be best to report that to browser developers.

@jidanni
Copy link

jidanni commented Feb 22, 2021

Heya, if some browsers don't seem to work satisfactory, it might be best to report that to browser developers.

https://crbug.com/1178049

@lucacerza
Copy link

lucacerza commented Feb 25, 2021 via email

@parsasamandi
Copy link

That was great, thanks

@lucacerza
Copy link

lucacerza commented Mar 15, 2021 via email

@lucacerza
Copy link

lucacerza commented Mar 16, 2021 via email

@geomago
Copy link

geomago commented Mar 24, 2021

None of the above solution worked for me in Chrome for Mac; in particular an input field generated by the "typeahead.js" library (that was not a password field) insisted to display the password suggestion when the field gets empty. At last I found that by simply putting the field inside a

tag makes it work, with no need to specify autocomplete=off in the field itself.

@tranbinhvn
Copy link

tranbinhvn commented Apr 6, 2021

With the reason for using the type="password" in mind: why not using type="text" and give it a font-family which makes the text unreadable? Like dots, or what ever.

<style>
    input.key {
        -webkit-text-security: disc;
    }
</style>
<script>
    var tagArr = document.getElementsByTagName("form");
    for (let i = 0; i < tagArr.length; i++) {
        tagArr[i].autocomplete = 'off';
    }
    var tagArrInput = document.getElementsByTagName("input");
    for (let i = 0; i < tagArrInput.length; i++) {
        tagArrInput[i].autocomplete = 'off';
        if (tagArrInput[i].type == "password") {
            tagArrInput[i].type = "text";
            tagArrInput[i].classList.add("key");
        }
        console.log('name=', tagArrInput[i].name);
    }
</script>

@killmenot
Copy link

For everyone who may need it there is a library that was created to resolve this problem
https://github.com/noppa/text-security

This solution works for me well (I adapted it for jss)

{
  password: {
    fontFamily: 'text-security-disc',
    WebkitTextSecurity: 'disc',
    '&::placeholder': {
      fontFamily: theme.typography.fontFamily,
    }
  }
}

@tomwjerry
Copy link

One thing that worked for me was to use httprequest to register users, I had to remove the password elements before calling location.href. No idea if it works in chrome. Browsers getting smarter so I guess it is just a question of time before this no longer works.

@MariaEduardaDaSilva
Copy link

MariaEduardaDaSilva commented Oct 15, 2021

That worked for me and my friend (@amandasantiagu), we are using the latest Chrome version 94.0.4606.81
We used it in React and it worked perfectly

<form autocomplete="off" style="100%">
        <input autocomplete="false" type="search" style=" overflow: hidden; display: none " />

        <input autocomplete="new-password">Your input info here </input>
</form>

@davesheffer
Copy link

use 'novalidate' on the form element
https://www.w3schools.com/tags/att_form_novalidate.asp

@mgssim
Copy link

mgssim commented Nov 25, 2023

help me for this type for special password

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