Disabling Chrome Autofill

Question

I have been running into issues with the chrome autofill behavior on several forms.

The fields in the form all have very common and accurate names, such as "email", "name", or "password", and they also have autocomplete="off" set.

The autocomplete flag has successfully disabled the autocomplete behavior, where a dropdown of values appear as you start typing, but has not changed the values that Chrome auto-populates the fields as.

This behavior would be ok except that chrome is filling the inputs incorrectly, for example filling the phone input with an email address. Customers have complained about this, so it's verified to be happening in multiple cases, and not as some some sort of result to something that I've done locally on my machine.

The only current solution I can think of is to dynamically generate custom input names and then extract the values on the backend, but this seems like a pretty hacky way around this issue. Are there any tags or quirks that change the autofill behavior that could be used to fix this?

Answer 1

Well since we all have this problem I invested some time to write a working jQuery extension for this issue. Google has to follow html markup, not we follow Google

(function ($) {

"use strict";

$.fn.autoCompleteFix = function(opt) {
    var ro = 'readonly', settings = $.extend({
        attribute : 'autocomplete',
        trigger : {
            disable : ["off"],
            enable : ["on"]
        },
        focus : function() {
            $(this).removeAttr(ro);
        },
        force : false
    }, opt);

    $(this).each(function(i, el) {
        el = $(el);

        if(el.is('form')) {
            var force = (-1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable))
            el.find('input').autoCompleteFix({force:force});
        } else {
            var disabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable);
            var enabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.enable);
            if (settings.force && !enabled || disabled)
                el.attr(ro, ro).focus(settings.focus).val("");
        }
    });
};
})(jQuery);

Just add this to a file like /js/jquery.extends.js and include it past jQuery. Apply it to each form elements on load of the document like this:

$(function() {
    $('form').autoCompleteFix();
});

jsfiddle with tests

Answer 2

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 autocompelete="new-password" disables autofill. It worked in latest 49.0.2623.112 chrome version.

Answer 3

Try this. I know the question is somewhat old, but this is a different approach for the problem.

I also noticed the issue comes just above the password field.

I tried both the methods like

<form autocomplete="off"> and <input autocomplete="off"> but none of them worked for me.

So I fixed it using the snippet below - just added another text field just above the password type field and made it display:none.

Something like this:

<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="display:none;" />
<input type="password" name="password_fake" id="password_fake" value="" style="display:none;" />
<input type="password" name="password" id="password" value="" />

Hope it will help someone.

Answer 4

You have to add this attribute :

autocomplete="new-password"

Source Link : Full Article

Answer 5

Different solution, webkit based. As mentioned already, anytime Chrome finds a password field it autocompletes the email. AFAIK, this is regardless of autocomplete = [whatever].

To circumvent this change the input type to text and apply the webkit security font in whatever form you want.

.secure-font{
-webkit-text-security:disc;}

<input type ="text" class="secure-font">

From what I can see this is at least as secure as input type=password, it's copy and paste secure. However it is vulnerable by removing the style which will remove asterisks, of course input type = password can easily be changed to input type = text in the console to reveal any autofilled passwords so it's much the same really.

Answer 6

Instead of "this is what worked for me" answers and other answers that look like complete hacks... This is currently how chrome (and the latest spec) will handle the autocomplete attributes on your input elements:

https://developers.google.com/web/fundamentals/design-and-ui/input/forms/label-and-name-inputs?hl=en

TLDR: Add autocomplete='<value>' on your inputs, where <value> should be any string that defines what the field is for. This works similarly to the name attribute. Use the suggested values on the link above where possible.

Also, remove the autocomplete attribute from your form