Programmatically disabling Chrome auto-fill

Question

There’s some discussion about this around the internet (especially here on stack overflow), but quite a lot of it dates from around 2015, so I was wondering if anyone had any recent experience.

We use a JavaScript widget to power type-ahead search functionality on web forms, but this UI is consistently overlaid with the Chrome autofill.

While autocomplete=“off” used to work, Chrome seems to ignore this value now, and show the UI anyway. The only thing I can find that works with Chrome 66/67 on OSX is an invalid value, such as autocomplete=“blah”. This seems way too sketchy though, and we have experimented with this before and it gets ignored in certain situations/Chrome versions.

Has anyone fond a reliable way to turn this off using HTML/Javascript?

As a side note - it looks like even Google can’t turn it off when needed, as their own Google maps type-ahead widget gets overlaid by the Chrome autofill. This can be seen on most Shopify stores.

Answer 1

autocomplete="off" doesn't work anymore. The only thing which works as of 2019 is autocomplete="new-password"

Check this link on Chromium Project https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands

Add an autocomplete attribute with a value of username for usernames.

If you've implemented an "email first" sign-in flow that separates the username and password into two separate forms, include a form field containing the username in the form used to collect the password. You can, of course, hide this field via CSS if that's appropriate for your layout.

Add an autocomplete attribute with a value of current-password for the password field on a sign-in form.

Add an autocomplete attribute with a value of new-password for the password field on sign-up and change-password forms.

If you require the user to type their password twice during sign-up or password update, add the new-password autocomplete attribute on both fields.

<form id="login" action="signup.php" method="post">
  <input type="text" autocomplete="new-password">
  <input type="password" autocomplete="new-password">
  <input type="submit" value="Sign Up">
</form>

Answer 2

You can just put autocomplete="new-password" in your password field and that's it. That should work just fine!

Answer 3

jquery.disable-autofill

Disable Chrome's autofill. Handy for CRUD forms, when you don't want username/password inputs to be autofilled by the browser.

Usage:

<form>
  <input type="input" name="username" autofill="off" autocomplete="off">
  <input type="password" name="password"  autofill="off" autocomplete="off">
</form>

<script src="jquery.disable-autofill.js"></script>
<script>
  $('input[autofill="off"]').disableAutofill();
</script>

https://github.com/biesbjerg/jquery.disable-autofill

Answer 4

I solved this problem using autocomplete="nope"

<input type="text" autocomplete="nope" />

Answer 5

At this time (May, 2019) only autocomplete="new-password" is working well.

It can do programmatically with jQuery for example :

$('form, input, select').attr('autocomplete', 'new-password');

Answer 6

Work to me

  <input [name]="nameControl" type="text" autocomplete="new-password">

in the component:

  this.nameControl = "name" + this.getRandomInt();

  getRandomInt() {
    return Math.floor(Math.random() * Math.floor(100));
  }

Answer 7

Using jQuery in September, 2019. The only thing close to consistency I've achieved for disabling autocomplete/autofill on an entire form:

$('.disable-autofill').focus(function () {
    $(this).attr('autocomplete', 'new-password');
});
$('.disable-autofill').blur(function () {
    $(this).removeAttr('autocomplete');
});

Then apply class to your inputs e.g.:

<input name="first_name" class="disable-autofill">

You have to remove the attribute because if too many inputs have autocomplete then chrome starts ignoring it again :)

Answer 8

For React, you could do something like this -

<input id={id} name={'a'+Math.random()} type="text" />

if all you need to do is access the input value elsewhere by the id, eg

const value = document.getElementById(id)

(This is partly how the jQuery Disable Auto Fill Plugin works).

Answer 9

How to disable Autofill in Chrome 86+

I tried several methods but non of them worked so I came up with workaround below. If there will be an update from Chrome Dev-team on proper Autofill disabling mechanism, this answer will not be relevant and should not be used.

1. Add .disable-autocomplete class to any input field(s).

<input name="blahblah" type="text" class="disable-autocomplete">

2. Turn off address autocomplete by giving unique Autocomplete value and Regular Autofill by giving unique ID.

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
var uniqueAutocompleteID = + new Date();
$(".disable-autocomplete").attr("autocomplete", uniqueAutocompleteID);
$(".disable-autocomplete").attr("id", uniqueAutocompleteID);
</script>

Answer 10

I could solve it with this code:

<form autocomplete="off">
 <input type="text" name="text" autocomplete="off" spellcheck="off" autocorrect="off"/>
</form>

Answer 11

Not a very elegant sollution but it works. The autofill fires on document ready. If we disable the input fields for a second it fail and then we can re-enable the input forms. This can be usefull for login forms and user forms on cruds. A better approach will be to set some overlay with a loading animation or something more user friendly.

Jquery example:

  $(document).ready(function() {

    $('#[FORM_ID] input').prop('disabled',true);
   setTimeout(function(){ $('#[FORM_ID] input').prop('disabled',false); }, 1000);
});

Replace #[FORM_ID] with the id of your form.

Answer 12

OLD ANSWER:

You can try brute force:

function annihilateChromesAutocomplete(){
    var clearAutocompleteInterval = setInterval(function(){
        var peskyAutocompletedInputs = document.querySelectorAll("input:-internal-autofill-selected");
        for(var i = (peskyAutocompletedInputs.length - 1); i > -1; i--){
            peskyAutocompletedInputs[i].value = peskyAutocompletedInputs[i].defaultValue;
        }
    }, 1);
    setTimeout(function(){
        clearInterval(clearAutocompleteInterval);
    }, 2000);
}

---

UPDATE:

I've stumbled upon a simpler, cleaner solution to this. If you make the default type of the input something weird like time and then change the type dynamically with JavaScript when the page loads, Chrome will look for the nth time input and end up ignoring your inputs.

window.addEventListener('load', function(){
  var inputs = document.getElementsByTagName("input");
  for(var i = 0; i < inputs.length; i++){
    if(inputs[i].type == "time"){
      inputs[i].type = "text";
    }
  }
});

<input type="time"/>
<input type="time"/>
<input type="time"/>

Of course, you can change specific inputs to whatever types you want. I'm just throwing out an example.

Answer 13

If you don't need to save password in browser, here is a solution using just css. Select type="text" for input field:

<input class="text-security-disc" type="text">

and add style to input, which hides text:

.text-security-disc {
    -webkit-text-security: disc;
    -moz-text-security: disc;
    text-security: disc;
}

This doesn't work for Mozilla Firefox, I've used this font: https://github.com/noppa/text-security

Answer 14

Try https://github.com/terrylinooo/disableautofill.js

<script src="https://cdn.jsdelivr.net/npm/disableautofill@2.0.0/dist/disableautofill.min.js"></script>

Usage:

 var daf = new disableautofill({
    'form': '#testForm',
    'fields': [
        '.test-pass',  // password
        '.test-pass2'  // confirm password
    ],
    'debug': true,
    'callback': function() {
        return checkForm(); // Form validator
    }
});

daf.init();

Answer 15

Use autocomplete="off" to disable autocomplete

and type="search" to disable address autofill

Answer 16

make sure your input elem is inside a <form> tag. disabling auto-fill did not worked for me until that.