autocomplete ='off' is not working when th

问题:

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?

回答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.

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

回答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.

回答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>

回答5:

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

回答6:

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

回答7:

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

回答8:

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

回答9:

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.

回答10:

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.

回答11:

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>

回答12:

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.

回答13:

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.

回答14:

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

回答15:

My sol :

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

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

回答16:

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>

回答17:

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

回答18:

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

Here you go.

回答19:

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>

回答20:

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

回答21:

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

回答22:

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

回答23:

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

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

回答24:

use this simple code

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