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

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?

This question is related to html autocomplete

The answer is


use this simple code

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

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

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

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


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

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

To learn more about autocomplete: https://html.spec.whatwg.org/multipage/forms.html#attr-fe-autocomplete-new-password


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

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

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

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


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

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

Here you go.


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

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


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

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

This worked for me


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>

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.


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


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>

My sol :

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

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

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>

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.


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.


For password , its not working currently.

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

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


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.


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.


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