如何禁用Edge表单的「Last Used」自动填充，保留单个字段自动完成

问题背景 #

Microsoft Edge推出的「Last Used」自动填充功能，会将上次提交的整份表单数据作为下拉首选项。当用户点击单个字段的该选项时，不仅会填充当前字段，还会覆盖表单中所有其他字段的值——这会导致Web应用中已预加载的字段被意外修改，影响仅需补充单个缺失信息的用户操作。

此前尝试给受保护字段设置autocomplete='off'或autocomplete='new-password'，虽然能禁用这些字段的自动完成，但无法阻止其他字段触发「Last Used」时覆盖它们，只能被迫禁用整个表单的自动完成功能。

解决方案 #

方案1：为受保护字段设置非标准autocomplete值 #

给需要保留预加载值的字段设置浏览器不识别的自定义autocomplete属性值，让浏览器将这些字段排除在默认的表单自动填充组之外。这样其他字段触发「Last Used」时，只会填充自身，不会覆盖受保护字段，同时不影响单个字段的自动完成功能。

修改后的代码示例：

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" autocomplete="custom-name"><br><br>

    <label for="surname">Surname:</label>
    <input type="text" id="surname" name="surname" autocomplete="custom-surname"><br><br>

    <label for="car-model">Car Model:</label>
    <input type="text" id="car-model" name="car-model" autocomplete="on"><br><br>

    <input type="submit" value="Submit">
    <button type="button" onclick="fillPerson1()">Person 1</button>
    <button type="button" onclick="fillPerson2()">Person 2</button>
</form>

<script>
  function fillPerson1() {
        document.getElementById("name").value = "Soze";
        document.getElementById("surname").value = "Kayser";
        document.getElementById("car-model").value = "";
    }

    function fillPerson2() {
        document.getElementById("name").value = "Bates";
        document.getElementById("surname").value = "Norman";
        document.getElementById("car-model").value = "";
    }
</script>

方案2：监听自动填充事件，恢复预加载值 #

如果方案1无法生效，可以通过JavaScript记录预加载的字段值，在检测到自动填充覆盖时立即恢复原值。针对Edge的「Last Used」行为，我们可以监听输入框的变化事件，或者表单的autocomplete事件：

<form id="myForm">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>

    <label for="surname">Surname:</label>
    <input type="text" id="surname" name="surname"><br><br>

    <label for="car-model">Car Model:</label>
    <input type="text" id="car-model" name="car-model"><br><br>

    <input type="submit" value="Submit">
    <button type="button" onclick="fillPerson1()">Person 1</button>
    <button type="button" onclick="fillPerson2()">Person 2</button>
</form>

<script>
  // 存储受保护字段的预加载值
  let protectedValues = {};

  function fillPerson1() {
        protectedValues.name = "Soze";
        protectedValues.surname = "Kayser";
        document.getElementById("name").value = protectedValues.name;
        document.getElementById("surname").value = protectedValues.surname;
        document.getElementById("car-model").value = "";
    }

    function fillPerson2() {
        protectedValues.name = "Bates";
        protectedValues.surname = "Norman";
        document.getElementById("name").value = protectedValues.name;
        document.getElementById("surname").value = protectedValues.surname;
        document.getElementById("car-model").value = "";
    }

    // 监听受保护字段的输入变化，检测自动填充并恢复原值
    document.querySelectorAll('#myForm input[name="name"], #myForm input[name="surname"]').forEach(input => {
        input.addEventListener('input', function() {
            if (this.value !== protectedValues[this.name]) {
                this.value = protectedValues[this.name];
            }
        });
    });

    // 监听表单的自动填充事件（兼容部分浏览器）
    document.getElementById('myForm').addEventListener('autocomplete', function() {
        setTimeout(() => {
            document.getElementById("name").value = protectedValues.name;
            document.getElementById("surname").value = protectedValues.surname;
        }, 0);
    }, true);
</script>

原理说明 #

• 方案1利用浏览器对autocomplete属性的识别规则：自定义值不会被归入默认的表单自动填充组，因此「Last Used」只会填充匹配到的单个字段。
• 方案2通过主动记录预加载值，在自动填充修改字段时强制恢复，确保受保护字段的值始终符合预期。

内容的提问来源于stack exchange，提问作者Manfred Regula