htmlautocompletemicrosoft-edgeautofill

Disable Edge Autocomplete "Last Used" in HTML form


Microsoft Edge introduced a new feature "Last Used" which is now the top proposition in the Autocomplete Drop Down list. When clicked it will not only fill the specific input field selected like for the other autocomplete propositions, but it will fill all fields of the form with the values used the last time on the same form. screen shot of Last Used feature In my web app I already have data preloaded in most fields and it happens now that some users who wants just to fill in one missing information will accidentally overwrite all preloaded data with the unwanted date from the "Last Used" memory. I am looking for a HTML tag or a JS workaround that blocks the "Last used" form prefill, but keeps the possibility to use autocomplete of individual input fields.

I tried using autocomplete='off'or autocomplete='new-password' on some individual fields I want to protect. Autocomplete will no longer show for these fields, but it does not protect them against modification by the "Last Used" autofill when it is done in a field where autocomplete is not disabled. So the only option I have right now is to completely disable autocomplete for all fields of the form.

Here is a demonstration :

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

https://jsfiddle.net/gsy3x1ze/2/

Open it in the latest version of Edge, fill in some data (for example "Smith", "Dick", "Toyota") and click submit. Re-click on run to refresh the form and click the "Person 1" button. This will prefill the form with new values for Name and Surname and empty the car model field. When you click now on the car model field this will suggest the in first place the "last used" option with Toyota in bold and Smith and Dick in italics. When clicked, all three fields will be filled. This is not what I want, the autocomplete should only fill the car model field and leave the the other two fields untouched like it is the case for the second option in the drop down list.


Solution

  • Using your code example, I have reproduced this issue caused by "Last Used". And I noticed that this only occurs to preloaded data, but not to manually input data.

    To avoid such action for preloaded data, I'm afraid the only solution now is to walk extra mile down and select another option which won't fill all the boxes:

    enter image description here

    As this is a new feature in Microsoft Edge (but unfortunately there's no relevant setting to turn it off, neither there's any HTML attribute to control it), I suggest sending feedback to the Edge Dev Team (just press Alt+Shift+I in the browser).