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

by

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?

Contents hide
Answers:
Method 1
Method 2
Method 3
Method 4
Method 5
Method 6
Method 7
Method 8
Method 9
Method 10
Method 11
Method 12
Method 13
Method 14
Method 15
Method 16
Method 17
Method 18
Method 19
Method 20
Method 21
Method 22
Method 23
Method 24
Method 25
Method 26
Method 27
Method 28
Method 29
Method 30

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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

Method 2

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.

Method 3

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>

Method 4

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.

Method 5

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

To learn more about autocomplete:

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

Method 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.

Method 8

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 🙂

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

Method 10

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

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

Method 11

use this simple code

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

Method 12

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.

Method 13

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

Method 14

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>

Method 15

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.

Method 16

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

Here you go.

Method 17

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

Method 18

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

Method 19

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.

Method 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… 🙂

Method 21

My sol :

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

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

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

Method 23

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>

Method 24

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

Method 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”)

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

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

Method 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.

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

Method 30

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

This worked for me


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x