autocomplete ='off' is not working when the input type is password and make the input field above it to enable autocomplete

Question

I have an form with autocomplete disabled but it does not works and makes the autocomplete to be enabled in firefox and higher version of chrome

<form method="post" autocomplete="off" action="">
    <ul class="field-set">
    <li>
        <label>Username:</label>
        <input type="text" name="acct" id="username" maxlength="100" size="20">
    </li>
    <li>
        <label>Password:</label>
        <input type="password" name="pswd" id="password" maxlength="16" size="20" >
    </li>
    <li>
        <input type="submit" class="button" value="Login" id="Login" name="Login">
    </li>
    </ul>
</form>

When the type is changed from password to text it works in all browser. Can anyone help to solve this issue?

Wouldbe

To clarify: I suppose you are talking about the password manager, since browsers don't auto-complete password fields. – Vallation

No Alvaro. you can see here that I have made autocomplete disabled for the whole form but the dropdown is shown in the input text field which is before the input type password(as in code). – Wouldbe

That is the password manager. In my experience, disabling auto-complete prevents the browser from prompting to store the username+password but it won't make it forget existing passwords. – Vallation

Thank you I got it. But when I execute the above form, the dropdown is not shown in chrome version 24, whereas I am able to see the stored username+password in FF 18. Is this browser issue? Is there any way to delete the existing password? – Wouldbe

Why do you want to prevent the user from using more secure passwords from browsers they trust? – Babirusa

Such stuff was the reason because I wrote a Userscript who removed autocomplete from all forms, hence its my decision if i want to save a password and not the websites owner. Not able to save the password tends to more short & insecure passwords from the users, so its bad practice and thanks god browsers ignore this nowadays – Secretin

Hey @Richlv, the password manager stores the password in plain text. We want to avoid that. – Consultative

That seems wrong - many password managers today use an encrypted storage. In any case, that is not something you should attempt to control - that is a client side decision, and it should be controlled by the owner of the device. – Babirusa

Answer 1

Browser's normally have two related yet different features regarding forms:

• Form auto-complete, where items of <input type="text"> type (and similar) collect typed values and offer them back in the form of a drop-down list.
  (It's a simple feature that works pretty well.)

• Password manager, where browser prompts to remember username/password combinations when it detects you've submitted a login form. When returning to the site, most browsers display available usernames in a drop-down box (Firefox, Chrome, Internet Explorer...) but some have a toolbar button (Opera). Also, Chrome highlights the fields in hard-coded yellow.
  (This depends on heuristics and might fail on certain pages.)

There's an edge case with forms tagged as autocomplete="off". What happens if it's a login form and the user has previously stored a username/password? Actually removing the password from the local database looks like inappropriate so probably no browser does so. (In fact, data from form auto-complete is not erased either.) Firefox decides to give power to the user: you have a password, so I'll let you use it. Chrome decides to give power to the site.

Cord

Is there anyway to prevent chrome from displaying suggestions in dropdown list? – Provisory

@ElKopyto not really. What you can do is to trick Chrome and name your input other then email 😑 🤷‍♂️ – Espagnole

Answer 2

You can just make the field readonly while form loading. While the field get focus you can change that field to be editable. This is simplest way to avoid auto complete.

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

Corbicula

@Nishant Pandya & Jean Paul Ruiz if you disable javascript in your browser, it wont' work – Corbicula

@attofi no it doesn't, it takes "false" and "new-password" as well – Infectious

autocomplete="off" works for me with the above solution – Malka

@Jeff Johny The old passwords will remain the browser. If you clear your browser data, then this problem won't occur – Corbicula

false is not correct i think, but the readonly solution is nice and elegant – Ratepayer

If the user double clicks on the field then the list of options will come back... – Passus

Answer 3

When I faced the same problem I resolved by creating a temporary text box above the password field and hide it

like this,

<form method="post" autocomplete="off" action="">
    <ul class="field-set">
    <li>
        <label>Username:</label>
        <input type="text" name="acct" id="username" maxlength="100" size="20">
    </li>
    <li>
        <label>Password:</label>
        <input type="text" style="display:none;">
        <input type="password" name="pswd" id="password" maxlength="16" size="20" >
    </li>
        ...
    </ul> </form>

It will make the username text field not to show any previously typed words in a drop down. Since there is no attribute like name, id for the input field <input type="text" style="display:none;"> it wouldn't send any extra parameters also.

I am Not sure this is a good practice, but it will resolve the issue.

Hodgkin

I tried many solutions and wasted about two hours.Your trick worked!Keep up the good work friend:-) – Unscramble

And it seems to be broken again in Firefox 39.0.3 - it still autofills password field :( But adding <input type="password" style="display:none"> does help :) – Darya

So frustrating to have to do these type of "hacks" to prevent autofilling. what is the actual use of autocomplete="off" now? Thank you though your solution helped! – Trenton

I'm pretty sure this is a security flaw. password fields have a special protection from the browser. For a hidden text field - a User just has to use the browsers' developer tools to access that field. – Ocam

Answer 4

This will prevent the auto-filling of password into the input field's (type="password").

<form autocomplete="off">
  <input type="password" autocomplete="new-password">
</form>

Plaster

Correct. As stated here support for this value has not been implemented on Firefox. – Shalne

And after submit, all password managers will try to update the current password to the value from this input. Not suitable for the "current password" input. – Kayak

Answer 5

Just add the autocomplete="new-password" attribute to your password input field.

To learn more about autocomplete:

• WHATWG HTML Standard docs
• Mozilla Developer Network docs

Apraxia

This one worked for me in 2020. Thanks for the practical answer. – Arrestment

@Arrestment I still use it in 2022. I can appreciate when some features do not change every six months :) – Apraxia

This results in other potentially unwanted behavior like password helpers popping up on the field – Fleet

This is not working in Chrome in 2022. – Chokebore

THIS JUST WORKS – Hazy

not working in chrome and firefox browsers – Amidase

Working on chrome 107.0.5304.107 – Eohippus

Answer 6

For text type use autocomplete="off" or autocomplete="false"

<input id="username" type="text" autocomplete="false">

For password type use autocomplete="new-password"

<input id="password" type="password" autocomplete="new-password">

Sweepings

Answer 7

I've tried all sort of workarounds, but just that combination worked on all browsers in my case:

<input type="password" id="Password" name="Password" 
       autocomplete="new-password" 
       onblur="this.setAttribute('readonly', 'readonly');" 
       onfocus="this.removeAttribute('readonly');" readonly>

And it's quite clean solution too :)

Wiatt

Answer 8

What worked for me, was use autocomplete="new-password" only in input type="password", like this:

<input id="username" type="text">
<input id="password" type="password" autocomplete="new-password">

Independently of how many input have the form.

Nero

Answer 9

autocomplete=off is largely ignored in modern browsers - primarily due to password managers etc.

You can try adding this autocomplete="new-password" it's not fully supported by all browsers, but it works on some

<form method="post" autocomplete="off" action="">
    <ul class="field-set">
    <li>
        <label>Username:</label>
        <input type="text" name="acct" id="username" maxlength="100" size="20">
    </li>
    <li>
        <label>Password:</label>
        <input type="text" style="display:none;">
        <input type="password" name="pswd" id="password" maxlength="16" size="20" autocomplete="new-password">
    </li>
        ...
    </ul> </form>

Seringa

Answer 10

Adding autocomplete="off" is not gonna cut it - it's ignored by Chrome.

Change input type attribute to type="search".
Google doesn't apply auto-fill to inputs with a type of search.

Rockey

This is the only thing will prevent the autocomplete on my form with Edge Version 91.0.864.71 (Official build) (64-bit) – Bicolor

It's works on Edge :) – Bainmarie

Answer 11

Try setting autocomplete="new-password" as shown below:

<input type="password" name="pswd" id="password" maxlength="16" size="20" autocomplete="new-password" />

Caruncle

This seems to be the first answer using the solution that worked for me. All I had to do was change autocomplete="off" to autocomplete="new-password", and it fixed both populating the password field AND populating the field above it with the my user id (email address)! I wasted two days debugging my pages, the router, the accounts authorization, etc. Very frustrating, but this solved it. Thanks! – Torray

Answer 12

use this simple code

<input type="password" class="form-control ltr auto-complete-off" id="password" name="password" autocomplete="new-password">

Shebeen

Answer 13

I was recently faced with this problem, and with no simple solution since my fields can be prepopulated, I wanted to share an elegant hack I came up with by setting password type in the ready event.

Don't declare your input field as type password when creating it, but add a ready event listener to add it for you with jQuery:

<input type="text" name="pswd" id="password" maxlength="16" size="20" >

<script>
$(function(){
    document.getElementById('password').setAttribute('type', 'password');
});
</script>

Nahamas

$('#password').attr('type','password'); – Smithy

Answer 14

Here's a hack that seems to work in Firefox and Chrome.

In Firefox, having a disabled text field just before the password field seems to do the trick, even if it is hidden (disabled: none)

In Chrome, it has to be visible though.

So I suggest something like this :

HTML:

<input class="password-autocomplete-disabler" type="text" disabled>
<input type="password" name="pwd">

CSS :

input[type=text].password-autocomplete-disabler {
    position: absolute !important;
    left: -10000px !important;
    top: -10000px !important;
}

Redtop

No idea why this works but this made my day! I just made mine display:none – Scheelite

display:none doesn't seem to work with chrome, unless you use readonly instead of disabled. – Redtop

Another solution is to use "hidden": <input hidden readonly> seems to do the trick in both firefox and chrome. – Redtop

Answer 15

I know this is an old question, but browsers have been changing over time. Although some of the answers to this question mentioned here like: creating a temporary text box above the password field and hiding it may have worked in the past, currently the easiest way to prevent the browser from popping up the password manager is to have at least three separate additional hidden password inputs, each with different dummy values, like so:

<form method="post" autocomplete="off" action="">
    <ul class="field-set">
    <li>
        <label>Username:</label>
        <input type="text" name="acct" id="username" maxlength="100" size="20">
    </li>
    <li>
        <label>Password:</label>
        <input type="password" name="pswd" id="password" maxlength="16" size="20" >
        <input type="password" style="display: none;" value="dummyinput1"/>
        <input type="password" style="display: none;" value="dummyinput2"/>
        <input type="password" style="display: none;" value="dummyinput3"/>
    </li>
    <li>
        <input type="submit" class="button" value="Login" id="Login" name="Login">
    </li>
    </ul>
</form>

Barnie

Answer 16

My solution inspired here goes as follows:

<form>
    <input type="text" style="position: absolute !important; left: -10000px !important; top: -10000px !important;">
    <input type="password" style="position: absolute !important; left: -10000px !important; top: -10000px !important;">
    Username: <input type="text">
    Password: <input type="password">
    <input type="submit">
</form>

It sure is ugly, feels misplaced in 2017, but it works and protects the username and password field from autofilling. Note that in Firefox (version 51 at the time of writing) it does not matter a bit what combination of name, id or autocomplete is used, be it on form or input fields. Without the first two dummy fields, autofilling will take place any time domain is matched and it will ruin your day.

Heins

Answer 17

<input type="password" placeholder="Enter Password" class="form-control" autocomplete="new-password">

Here you go.

Karlie

Answer 18

You should absolutely not do this

By disallowing and interfering with password completion you are making your users less safe. The correct coding for a password field should include:

autocomplete="current-password"

Making a user type a password means that that they have to use a weak password that they can accurately type, not use a password manager and a complex, unique, and long password. For a detailed discussion on this see: https://www.ncsc.gov.uk/blog-post/let-them-paste-passwords

Cooperman

Answer 19

When I faced the same problem, I came across two methods to solve it.

1. Using javascript
2. Using html (by creating a temporary text box above the password field and hide it)

Example using javascript

<input onfocus="this.type='password'" onblur="if (this.value.length <= 0) { this.type = 'text' } else { }" id="password"/>

Example using html (by creating a temporary text box just above the password field and hide it)

  <input type="text" style="display:none;">
  <input id="password" type="password">

Claypan

Answer 20

Why Don't Everyone Use This....

        <form>
            <div class="user">
            <i> </i>
            <input type="text" id="u1" name="u1" value="User Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'User Name';}">       
            </div>          
            <div class="user1"> 
            <i> </i>        
            <input type="password" id="p1" name="p1" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}" >
            </div>
            <div class="user2">                         
            <input type="submit" value="Login">
            </div>
        </form>

It's So Simple... :)

Maracanda

Answer 21

My sol :

<input oninput="turnOnPasswordStyle()" id="inputpassword" type="text">

function turnOnPasswordStyle(){
    $('#inputpassword').attr('type', "password");
}

Bristletail

Answer 22

For password , its not working currently.

So by default make password field as text and use following js code .

$('#real-password').on('input', function(){
            if ($(this).val() !== '') {
                $(this).attr('type', 'password');
            } else {
                $(this).attr('type', 'text');
            }
   });

Equi

Answer 23

A different approach is to clean the value of the password field on page load instead of trying to prevent it from auto-filling.

With jQuery simply add something like:

$(function() { $('input[type="password"]').val(''); });

Amil

Answer 24

I've found that if the input has no name (e.g. the name attribute is not set), the browser can't autocomplete the field. I know this is not a solution for everyone, but if you submit your form through AJAX, you may try this.

Blondy

it is not true. I have tested this with Ajax with no name yet it was autocompleting – Zest

I've tried every combination of everything with ids. names, autocomplete and autocompleteList and nothing is preventing Edge from suggesting email addresses to populate this form. – Bicolor

Answer 25

I think this issue is specific for the browser(chrome), so you can manage by adding a condition for chrome only Like:

@Html.PasswordFor(model => model.Password, new { @autocomplete = (Request.Browser.Browser.ToLower().Contains("chrome") ? "new-password" : "off") })

@autocomplete = (Request.Browser.Browser.ToLower().Contains("chrome") ? "new-password" : "off")

Abort

It's not Chrome specific. New Edge also has the problem, and autocomplete="new-password" fix works for it, too. – Torray

Answer 26

Using JQuery when click, input, or focus on the input password apply readonly and after 50 milliseconds remove readonly... effect not show drop-down list

window.jQuery('form input[type="password"]').on('focus input click', function(e) {
  var self = $(this);
  self.prop('readonly', true);
  setTimeout(function() {
    self.prop('readonly', false);
  }, 50);
});

Casias

Pease add some details about you code and how does it answers the question. – Unstrap

Answer 27

Just Found Another Simple Solution and worked for me on all 3 main browsers Chrome Firefox and Opera

<input type="text" onfocus="this.type='email'"/>
<input type="text" onfocus="this.type='password'"/>

Corvus

Answer 28

I have found this solution having tried other suggestions - My problem was with Edge. I tried using random string for autocomplete value and other methods suggested above but those were not solving the problem because as I later found out the problem was with the cache.

Clearing browser cache helped.

Anchovy

Answer 29

I have fixed it:

<input matInput type="text" (focus)="userNameFocus()" placeholder="Username" #u1 formControlName="userName" autocomplete="off" />

// re-initialize form on focus()

<input matInput [type]="inputType" style="-webkit-text-security: square;" #p2 formControlName="password" />

Corriveau

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Edlin

Answer 30

Solution 1. If your using bootstraps just add form-control in p tag class attribute

 <div class="form-group row">
      <label for="password" class="col-md-3 col-form-label">Password</label>
      <div class="col-md-9">
          <p class="input-password form-control" id="password" contenteditable="true" spellcheck="false"></p>
      </div>
 </div>

And and some styling into it

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

    p.input-password {
        font-family: 'password';
    }
</style>

Solution 2. Convert p tag to contenteditable=true and add some styling into it.

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

    p.input-password {
        font-family: 'password';
        width: 100%;
        border: 1px solid blue;
        border-radius: 5px;
        outline: none;
    }
  </style>



  <label for="password" class="col-md-3 col-form-label">Password</label>
  <p class="input-password" id="password" contenteditable="true" spellcheck="false"></p>

Also you can copy my JSFiddle and thanks for this wonderful masker by rafaelcastrocouto.

If you experience some delay on text to circle dot, the better way is to download password masker.

1. Download the Password Masker here, then place it to folder path js/password/<your-password.tff-file>

2. remove src: url('https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/password.ttf');

3. Uncomment src: url("js/password/password.ttf");

Gabriellia

Answer 31

    <input type="password" id="byLast" class="bump25" autocomplete="new-password" onclick="this.type='text'" /> )

This worked for me

Lightly