Shopify Question posted in
The Shopify help center can be found here.

Programmatically disabling Chrome auto-fill – Shopify

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.

Tags:

16

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
  4. 0

    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');
    Login or Signup to reply.
  5. 0

    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.

    Login or Signup to reply.
  6. 0

    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));
  }
    Login or Signup to reply.
  7. 0

    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 🙂

    Login or Signup to reply.
  8. 0

    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.

    Login or Signup to reply.
  9. 0

    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

    Login or Signup to reply.
  10. 0

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

    Login or Signup to reply.
  11. 0

    I solved this problem using autocomplete="nope"

    <input type="text" autocomplete="nope" />
    Login or Signup to reply.
  12. 0

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

    Login or Signup to reply.
  13. 0

    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">
    1. 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>
    Login or Signup to reply.
  14. 0

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

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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();
    Login or Signup to reply.
  15. 0

    I could solve it with this code:

    <form autocomplete="off">
 <input type="text" name="text" autocomplete="off" spellcheck="off" autocorrect="off"/>
</form>
    Login or Signup to reply.
  16. 0

    Use autocomplete="off" to disable autocomplete

    and type="search" to disable address autofill

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search