Disabling Chrome Autofill

Answer 1

In 2016 Google Chrome started ignoring autocomplete=off though it is in W3C. The answer they posted:

The tricky part here is that somewhere along the journey of the web autocomplete=off become a default for many form fields, without any real thought being given as to whether or not that was good for users. This doesn't mean there aren't very valid cases where you don't want the browser autofilling data (e.g. on CRM systems), but by and large, we see those as the minority cases. And as a result, we started ignoring autocomplete=off for Chrome Autofill data.

Which essentially says: we know better what a user wants.

They opened another bug to post valid use cases when autocomplete=off is required

I haven't seen issues connected with autocomplete throught all my B2B application but only with input of a password type.

Autofill steps in if there's any password field on the screen even a hidden one. To break this logic you can put each password field into it's own form if it doesn't break your own page logic.

<input type=name >

<form>
    <input type=password >
</form>

Answer 2

If you're having issues with keeping placeholders but disabling the chrome autofill I found this workaround.

Problem

HTML

<div class="form">
    <input type="text" placeholder="name"><br>
    <input type="text" placeholder="email"><br>
    <input type="text" placeholder="street"><br>
</div>

http://jsfiddle.net/xmbvwfs6/1/

The above example still produces the autofill problem, but if you use the required="required" and some CSS you can replicate the placeholders and Chrome won't pick up the tags.

Solution

HTML

<div class="form">
    <input type="text" required="required">
    <label>Name</label>  
    <br>
    <input type="text" required="required">
    <label>Email</label>    
    <br>
    <input type="text" required="required">
    <label>Street</label>    
    <br>
</div>

CSS

input {
    margin-bottom: 10px;
    width: 200px;
    height: 20px;
    padding: 0 10px;
    font-size: 14px;
}
input + label {
    position: relative;
    left: -216px;
    color: #999;
    font-size: 14px;
}
input:invalid + label { 
    display: inline-block; 
}
input:valid + label { 
    display: none; 
}

http://jsfiddle.net/mwshpx1o/1/

Answer 3

I really did not like making hidden fields, I think that making it like that will get really confusing really fast.

On the input fields that you want to stop from auto complete this will work. Make the fields read only and on focus remove that attribute like this

<input readonly onfocus="this.removeAttribute('readonly');" type="text">

what this does is you first have to remove the read only attribute by selecting the field and at that time most-likely you will populated with your own user input and stooping the autofill to take over

Answer 4

I don't know why, but this helped and worked for me.

<input type="password" name="pwd" autocomplete="new-password">

I have no idea why, but autocomplete="new-password" disables autofill. It worked in latest 49.0.2623.112 chrome version.

Answer 5

For me, simple

<form autocomplete="off" role="presentation">

Did it.

Tested on multiple versions, last try was on 56.0.2924.87

Answer 6

Here are my proposed solutions, since Google are insisting on overriding every work-around that people seem to make.

Option 1 - select all text on click

Set the values of the inputs to an example for your user (e.g. your@email.com), or the label of the field (e.g. Email) and add a class called focus-select to your inputs:

<input type="text" name="email" class="focus-select" value="your@email.com">
<input type="password" name="password" class="focus-select" value="password">

And here's the jQuery:

$(document).on('click', '.focus-select', function(){
  $(this).select();
});

I really can't see Chrome ever messing with values. That'd be crazy. So hopefully this is a safe solution.

Option 2 - set the email value to a space, then delete it

Assuming you have two inputs, such as email and password, set the value of the email field to " " (a space) and add the attribute/value autocomplete="off", then clear this with JavaScript. You can leave the password value empty.

If the user doesn't have JavaScript for some reason, ensure you trim their input server-side (you probably should be anyway), in case they don't delete the space.

Here's the jQuery:

$(document).ready(function() {
  setTimeout(function(){
    $('[autocomplete=off]').val('');
  }, 15);
});

I set a timeout to 15 because 5 seemed to work occasionally in my tests, so trebling this number seems like a safe bet.

Failing to set the initial value to a space results in Chrome leaving the input as yellow, as if it has auto-filled it.

Option 3 - hidden inputs

Put this at the beginning of the form:

<!-- Avoid Chrome autofill -->
<input name="email" class="hide">

CSS:

.hide{ display:none; }

Ensure you keep the HTML note so that your other developers don't delete it! Also ensure the name of the hidden input is relevant.