如何通过HTML或JavaScript禁用网页表单的自动填充功能？

Question

有没有一种方法可以通过HTML或JavaScript在Chrome和其他浏览器上禁用表单字段的自动填充？我不希望浏览器自动填写以前用户在表单中输入的答案。

我知道我可以清除缓存，但我不能依赖反复清除缓存。

- at.

Answer 1

你可以在HTML的输入级别上通过添加autocomplete="off"来实现。

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

你也可以通过JS来实现，例如：

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

- LNendza

---

请注意，很少有现代浏览器完全支持此功能：https://caniuse.com/#search=Autocomplete - Madbreaks

是的，这从来没有起作用过。即使在最新的Chrome上也不行。 - Elazar Zadiki

在较新的浏览器，特别是Chromium Edge中，请使用aria-autocomplete="none"。https://dev59.com/i1wY5IYBdhLWcg3wTGJu#73691203 - cytek04

Answer 2

实际上，在较新的浏览器中，自动完成关闭并不总是有效。例如，在Chrome浏览器中，如果设置了autofill属性，则会忽略此设置。请参考以下链接：http://caniuse.com/#feat=input-autocomplete-onoff

- oddpodm

Answer 3

jQuery one:

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

- testing

Answer 4

我有同样的问题。想要采用HTML解决方案（我不喜欢使用不干净的JS解决方案）。唯一有效的方法是将输入框的ID和/或名称更改为不是常见关键字的内容。

请阅读Talinon在这个Laracast主题中的回答：

我曾经在一个文本字段上遇到过这个问题。无论我做什么，Chrome都会自动填充/完成。最终我发现将元素的ID /名称更改解决了这个问题。就像Chrome有一些硬编码的关键字，它寻找并坚持自动填充它们一样。如果所提供的hack无法解决问题，请尝试将ID /名称更改为不包含“title”或“address”等内容。

长话短说：

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

更详细的故事（为什么这样做是有效的）：使用HTML禁用表单输入的自动完成

- Vladimir Marton

Answer 5

我找到了一种可以在 Chrome、Firefox 和 Edge 中使用的方法：

1. 将所有输入框的名称和 ID 设置为随机值。
2. 在字段提示中的 span 元素中放入一些隐藏的垃圾内容。

即使您重命名 / 重新设置 ID，浏览器仍会使用提示来猜测并提供自动完成。所以，我在提示中这样做：

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

浏览器无法将其视为名称提示。我对电子邮件、移动电话、邮政编码做了同样的操作，它们都停止了自动完成。美好的一天！

我将它们合并成一个小库：

    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);
        }
    }

当页面加载时，我调用thwarteAutoFill(form, promptClassName, prefix)函数，该函数随机生成文本字段的ID和名称，并查找具有类名promptClassName的任何元素并混淆这些元素内部的单词。

然后，当我想要引用字段时，我调用gfe("origID")函数，它会返回正确的元素。

我还有一个resetAllFormElementIDs函数（在撰写本文时未经测试），它将所有内容恢复为原样，以便在提交表单之前调用它。

虽然有点复杂，但似乎可以工作；-)

- Yowser

Answer 6

我正在使用onfocus和onblur，就像这样:

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

- Dejan Dozet

Answer 7

你可以使用以下代码：

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

- Anand Dwivedi