Disable autofill on a web form through HTML or JavaScript?

Question

Is there a way to disable autofill in Chrome and other browsers on form fields through HTML or JavaScript? I don't want the browser automatically filling in answers on the forms from previous users of the browser.

I know I can clear the cache, but I can't rely on repeatedly clearing the cache.

Aziza

Answer 1

You can do it at the input level in HTML by adding autocomplete="off" to the input.

http://css-tricks.com/snippets/html/autocomplete-off/

You could also do it via JS such as:

someForm.setAttribute( "autocomplete", "off" ); 
someFormElm.setAttribute( "autocomplete", "off" );

Hoitytoity

Note that very few modern browsers fully support this: caniuse.com/#search=Autocomplete – History

yeah.. this never works. not even on the latest chrome. – Foliose

Use aria-autocomplete="none" for newer browsers, specifically Chromium Edge. https://mcmap.net/q/454784/-disable-input-text-suggestions-in-edge – Fricke

Answer 2

In fact autocomplete off doesn't always work in newer browsers. E.g in Chrome it is ignored if the autofill property is set. See the link: http://caniuse.com/#feat=input-autocomplete-onoff

Handicap

Answer 3

jQuery one:

$(".indication-checkbox").attr("autocomplete", "off");

Thuthucydides

Answer 4

I had the same issue. Wanted to stick to a HTML solution (I dont like dirty JS workarounds). The only thing that worked for me is when I changed ID and/or name of the input to something that is not a usual keyword.

Read Talinon's answer from this Laracast thread:

I once had this problem on a text field. No matter what I did, Chrome insisted on auto filling/completing. I eventually discovered changing the id/name of the element solved the problem. It's like Chrome has some hard-coded keywords it looks for and is bent on autofilling them. If the problem persists with the proposed hacks, try changing the id/name to something that doesn't contain "title" or "address", etc.

Long story short:

<form>
    <input type="email" name="fem" />
    <input type="password" name="fpass" autocomplete="new-password" />
</form>

Longer story (explanation why this works): Disabling autocomplete on form inputs with HTML

Cakewalk

Answer 5

You can use this code:

$(".TextID").attr("autocomplete", "off"); //disable input level 

Broderick

Answer 6

I am working with onfocus and onblur, like this:

<form>
  <p>Type something in both fields and hit submit button, then refresh this page and click on the first field. In chrome, you will get autocomplete on the first field, but if you select it it will populate only that first field!</p>
  <input type="text" name="first" placeholder="with autocomplete" /> <br/>
  <input type="text" name="second" placeholder="without autocomplete"
  readonly="readonly" 
  onfocus="if (this.hasAttribute('readonly')) {this.removeAttribute('readonly');}"
  onblur="if (!this.hasAttribute('readonly')) {this.setAttribute('readonly','readonly')};"
  /><br/>
  <button type="submit">Send</button>
</form>

Concepcionconcept

Answer 7

I found a way that works with Chrome, Firefox and Edge:

1. Set the name and ID of all of your inputs to random.
2. Put some hidden rubbish in a span element in the field prompt.

Even when you rename / reID (??) each input, the browser uses the prompt to guess and still offers autocomplete. So, I did this in the prompt:

First/Given N<span style="display:none">fmkdgnkdfjgh</span>ame

The browser doesn't see this as a Name prompt. I did the same with Email, Mobile, Postcode and they all stopped offering autocomplete. Happy days!

I combined this into a small library:

    var formFields = []; // Holds table of random element IDs vs original IDs/names

    // Make sure our proposed new random field name is unique (it will be, but belt and braces)
    var isUniqueFormElementID = iufeid = function (proposedID) {
        for (var p = 0; p < formFields.length; p++) {
            if (formFields[p].id == proposedID)
                return false;
        }
        return true;
    }

    // Given an element and a prefix, generate a random field name, record it in formFields and change the element's ID and Name
    var setFormElementID = sfeid = function (element, prefix) {
        if (element.type.toLowerCase() == "text") {
            do
                newID = prefix + Math.floor(Math.random() * 1000000);
            while (iufeid(newID) == false);

            formFields.push({ id: newID, origID: element.id, origName: element.name });
            element.id = newID;
            element.name = newID;
        }
    }

    // Return the index of an element's original ID in formFields
    var findFormElement = ffe = function (origID) {
        for (var p = 0; p < formFields.length; p++) {
            if (formFields[p].origID == origID)
                return p;
        }
        return -1;
    }

    // Return an element given its original ID
    var getFormElement = gfe = function (origID) {
        var idx = ffe(origID);

        if (idx != -1)
            return document.getElementById(formFields[idx].id);
        else
            return null;
    }

    // Remove an element from formFields and set its ID and Name back to the original
    var resetFormElementID = removeFormElement = rfeid = rfe = function (origID) {
        var idx = ffe(origID);

        if (idx != -1) {
            ele = document.getElementById(formFields[idx].origID);
            ele.id = formFields[idx].origID;
            ele.name = formFields[idx].origName;
            formFields.splice(idx, 1);
            return ele;
        } else
            return null;
    }

    // Remove all elements from formFields and set their ID and Name back to the original
    var resetAllFormElementIDs = removeAllFormElements = rafeids = rafae = function () {
        for (var p = 0; p < formFields.length; p++) {
            ele = document.getElementById(formFields[p].id);
            ele.id = formFields[p].origID;
            ele.name = formFields[p].origName;
        }

        formFields = [];
    }

    // Return and obfuscate the prompt text of a field
    var obfuscatePrompt = oP = function (promptText) {
        var words = promptText.split(" ");

        for (var p=0; p<words.length; p++)
            words[p] = words[p][0] + "<span style='display:none'>fmkdgnkdfjgh</span>" + words[p].substring(1);

        return words.join(" ");
    }

    // Main call
    //
    // form             Form. The form object. If null, defaults to the first form found in document.forms.
    // promptClassName  String. The class name of the tags that contain the prompt text
    // elementPrefix    String. The prefix prepended to each element ID and name. If null, Defaults to "fld_".
    var thwarteAutoFill = taf = function(form, promptClassName, elementPrefix) {
        if (form == null) {
            if (document.forms.length > 0) {
                form = document.forms[0];
            }
        }

        if (elementPrefix == null) {
            elementPrefix = "fld_";
        }

        if (form != null && typeof promptClassName === "string") {
            for (var p = 0; p < form.elements.length; p++)
                sfeid(form.elements[p], elementPrefix);

            prompts = document.getElementsByClassName(promptClassName);
            for (p = 0; p < prompts.length; p++)
                prompts[p].innerHTML = oP(prompts[p].innerText);
        }
    }

I call thwarteAutoFill(form, promptClassName, prefix) when the page has loaded, which randomises the text field IDs and names and looks for any element with the class name promptClassName and obfuscates the words inside those elements.

Then when I want to get a reference to a field I call gfe("origID") and it returns the correct element.

I also have a resetAllFormElementIDs function (untested as of writing this) that puts everything back as it was so I can call it before posting the form.

Convoluted, but seems to work ;-)

Conah