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?

To clarify: I suppose you are talking about the password manager, since browsers don't auto-complete password fields. — Álvaro González, Jul 18 '13 at 09:49
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). — user2594463, Jul 18 '13 at 10:09
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. — Álvaro González, Jul 18 '13 at 10:15
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? — user2594463, Jul 18 '13 at 10:26
Why do you want to prevent the user from using more secure passwords from browsers they trust? — Richlv, Feb 21 '19 at 08:19
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 — Petschko, Apr 15 '20 at 12:05
Hey @Richlv, the password manager stores the password in plain text. We want to avoid that. — Jus, Mar 17 '21 at 14:55
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. — Richlv, Mar 18 '21 at 10:39

score 65 · Answer 1 · answered May 20 '15 at 08:50

65

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

answered May 20 '15 at 08:50

sujivasagam

1,659
1
14
26

@Nishant Pandya & Jean Paul Ruiz if you disable javascript in your browser, it wont' work – sujivasagam Nov 21 '17 at 04:13
@attofi no it doesn't, it takes "false" and "new-password" as well – Michael Dec 08 '17 at 19:50
3

autocomplete="off" works for me with the above solution – vCillusion Apr 04 '19 at 05:34
@Jeff Johny The old passwords will remain the browser. If you clear your browser data, then this problem won't occur – sujivasagam Jun 27 '19 at 10:18
1

false is not correct i think, but the readonly solution is nice and elegant – Stavros Jul 11 '19 at 16:28
If the user double clicks on the field then the list of options will come back... – Damoiskii Sep 03 '22 at 03:41

score 38 · Answer 2 · answered May 12 '14 at 10:08

38

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.

answered May 12 '14 at 10:08

Arivarasan L

9,538
2
37
47

3

I tried many solutions and wasted about two hours.Your trick worked!Keep up the good work friend:-) – Sotiris Zegiannis Jan 22 '15 at 10:48
1

And it seems to be broken again in Firefox 39.0.3 - it still autofills password field :( But adding `` does help :) – JustAMartin Aug 21 '15 at 06:57
8

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! – Rossco Jun 09 '16 at 08:08
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. – Benjamin Maurer Jun 01 '18 at 08:46

score 34 · Answer 3 · edited Jun 20 '18 at 15:46

34

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>

edited Jun 20 '18 at 15:46

Stéphane Bruckert

21,706
14
92
130

answered Sep 21 '17 at 09:59

sunny rai

565
6
6

1

Correct. As stated [here](https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields) _support for this value has not been implemented on Firefox_. – brass monkey Feb 05 '19 at 10:52
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. – asologor Oct 05 '20 at 12:13

alexpirine · Answer 4 · 2022-02-11T15:59:57.953

24

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

To learn more about autocomplete:

edited Feb 11 '22 at 15:59

answered Aug 31 '16 at 13:46

alexpirine

3,023
1
26
41

1

This one worked for me in 2020. Thanks for the practical answer. – Nikz Jul 02 '20 at 09:21
@Nikz I still use it in 2022. I can appreciate when some features do not change every six months :) – alexpirine May 24 '22 at 18:09
This results in other potentially unwanted behavior like password helpers popping up on the field – Geoffrey Hale Jun 16 '22 at 18:43
This is not working in Chrome in 2022. – Rashid Jul 24 '22 at 11:14
1

THIS JUST WORKS – Jinu Joseph Daniel Aug 24 '22 at 11:53
not working in chrome and firefox browsers – Jacob Nelson Oct 31 '22 at 12:13
Working on chrome 107.0.5304.107 – Aggestor Nov 22 '22 at 15:57

score 22 · Accepted Answer · answered Jul 18 '13 at 10:52

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.

Is there anyway to prevent chrome from displaying suggestions in dropdown list? — El Kopyto, Nov 21 '13 at 16:06
@ElKopyto not really. What you can do is to trick Chrome and name your `input` other then `email` ‍♂️ — Adam Orłowski, Feb 19 '21 at 22:40

score 13 · Answer 6 · answered Jun 22 '18 at 11:41

13

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

answered Jun 22 '18 at 11:41

Venki WAR

1,997
4
25
38

score 7 · Answer 7 · edited Jun 19 '18 at 15:28

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

edited Jun 19 '18 at 15:28

Stéphane Bruckert

21,706
14
92
130

answered Mar 23 '17 at 00:03

Jan Capuder

101
1
7

score 7 · Answer 8 · answered Jun 14 '17 at 22:04

7

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.

answered Jun 14 '17 at 22:04

Sieg

554
8
17

score 5 · Answer 9 · answered Oct 29 '17 at 07:06

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>

score 4 · Answer 10 · answered Apr 27 '17 at 13:44

4

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

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

answered Apr 27 '17 at 13:44

Baig

1,489
1
25
41

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! – RealHandy Aug 03 '20 at 17:11

score 4 · Answer 11 · answered Jan 01 '20 at 11:20

4

use this simple code

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

answered Jan 01 '20 at 11:20

Vahid Alvandi

588
9
17

score 3 · Answer 12 · edited Jan 04 '19 at 07:13

3

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>

edited Jan 04 '19 at 07:13

JLuc

333
5
15

answered Jul 18 '14 at 14:10

Matthew

89
1
8

$('#password').attr('type','password'); – ggdx Jun 04 '15 at 10:48

score 3 · Answer 13 · answered Oct 28 '15 at 16:35

3

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.

answered Oct 28 '15 at 16:35

Matas Vaitkevicius

58,075
31
238
265

This is the only thing will prevent the autocomplete on my form with Edge Version 91.0.864.71 (Official build) (64-bit) – SmoveBB Jul 19 '21 at 23:04

score 3 · Answer 14 · answered Sep 21 '16 at 15:30

3

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

answered Sep 21 '16 at 15:30

jlowcs

1,933
1
10
16

No idea why this works but this made my day! I just made mine `display:none` – BlazingFrog Sep 21 '16 at 22:50
display:none doesn't seem to work with chrome, unless you use readonly instead of disabled. – jlowcs Sep 21 '16 at 22:54
1

Another solution is to use "hidden": seems to do the trick in both firefox and chrome. – jlowcs Sep 21 '16 at 22:55

score 3 · Answer 15 · edited May 23 '17 at 12:18

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>

score 3 · Answer 16 · answered Jan 31 '17 at 14:23

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.

score 3 · Answer 17 · answered Sep 10 '18 at 14:34

3

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

Here you go.

answered Sep 10 '18 at 14:34

Bhaumik Thakkar

580
1
9
28

score 3 · Answer 18 · answered Feb 14 '20 at 11:03

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

score 3 · Answer 19 · answered Jul 07 '20 at 07:48

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

Using javascript
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">

score 2 · Answer 20 · answered Oct 28 '15 at 13:59

2

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.

answered Oct 28 '15 at 13:59

JotaDeAA

35
6

1

it is not true. I have tested this with Ajax with no name yet it was autocompleting – John Max Jun 25 '17 at 12:05
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. – SmoveBB Jul 19 '21 at 23:00

score 2 · Answer 21 · answered Apr 02 '16 at 07:18

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

score 2 · Answer 22 · answered May 29 '16 at 20:00

2

My sol :

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

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

answered May 29 '16 at 20:00

Stav Bodik

2,018
3
18
25

score 2 · Answer 23 · answered Jun 07 '17 at 09:35

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

score 2 · Answer 24 · edited Jul 05 '19 at 00:56

2

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

edited Jul 05 '19 at 00:56

Mateus Gonçalves

676
5
16

answered Feb 12 '19 at 05:10

Andrej

43
9

score 1 · Answer 25 · answered Feb 20 '19 at 10:20

1

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

answered Feb 20 '19 at 10:20

Chirag

76
3

It's not Chrome specific. New Edge also has the problem, and autocomplete="new-password" fix works for it, too. – RealHandy Aug 03 '20 at 17:00

Fabio Ferrero · Answer 26 · 2021-05-14T07:24:49.527

1

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

edited May 14 '21 at 07:24

answered May 13 '21 at 15:15

Fabio Ferrero

11
2

Pease add some details about you code and how does it answers the question. – Cosmin Staicu May 13 '21 at 16:44

score 0 · Answer 27 · answered Feb 14 '17 at 12:56

0

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

answered Feb 14 '17 at 12:56

gourav bajaj

170
10

score 0 · Answer 28 · answered Oct 27 '21 at 17: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.

score 0 · Answer 29 · edited Mar 31 '22 at 14:15

0

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

edited Mar 31 '22 at 14:15

ahuemmer

1,653
9
22
29

answered Mar 28 '22 at 08:54

farrukh

1
1

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](/help/how-to-answer). – Community Mar 28 '22 at 10:22

CodeHunter · Answer 30 · 2022-06-09T07:41:41.733

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.

Download the Password Masker here, then place it to folder path js/password/<your-password.tff-file>
remove src: url('https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/password.ttf');
Uncomment src: url("js/password/password.ttf");

score -1 · Answer 31 · answered Nov 11 '20 at 00:36

-1

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

This worked for me

answered Nov 11 '20 at 00:36

TheWizardOfTN

161
10

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

31 Answers31

Linked

Related