3

How do I prevent a form from suggesting auto-complete values, from previous entries or from saved information in Edge?

enter image description here

In the above image, the email input field is marked as autocomplete="false", but still in the right pane you can see the suggestion is populating.

When I add autocomplete=disabled to one field it seems it work, but when I add the attribute to all the inputs, it again starts displaying suggestions for every field.

What is the solution for this?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Iftikhar Ali Ansari
  • 1,650
  • 1
  • 17
  • 27
  • This is mostly an issue with the browser, not with your code. In other words you cannot change this behavior; it's the *user's* prerogative to have suggestions show up or not, not yours. – TylerH Apr 04 '22 at 16:18

2 Answers2

3

Add the aria-autocomplete="list" attribute to the input.

<input type="text" id="FirstName" name="attr1" aria-autocomplete="list">

Do not use any other value for the attribute.

Adrian Ber
  • 20,474
  • 12
  • 67
  • 117
  • Just an FYI I've added in 2 lines in my jquery. $this.attr("autocomplete", 'off'); $this.attr("aria-autocomplete", 'list'); Does the same trick! – Richard Housham Sep 05 '22 at 12:22
  • 1
    I tried in HTML directly with the `autocomplete` attribute and it doesn't work. – Adrian Ber Sep 06 '22 at 07:28
  • Yeah, same here. My Jquery has the autocomplete off and also your aria-autocomplete=" list" solution. I guess I'll keep having both - hopefully chrome/edge will fix the issue and respect the autocomplete off flag. (like they should) – Richard Housham Sep 06 '22 at 09:44
  • I noticed that it's only an issue with Edge, not Chrome. – Adrian Ber Sep 06 '22 at 09:48
  • Weird loads have people have said that it's an issue with Chrome and basically todo with the engine that both Chrome/Edge run on. https://stackoverflow.com/questions/12374442/chrome-ignores-autocomplete-off – Richard Housham Sep 06 '22 at 16:09
  • I guess that was the case in the past, but it seems to be fixed in Chrome. I guess that autocomplete part is a Edge specific part, not part of the engine. – Adrian Ber Sep 09 '22 at 08:09
2

According to your description, I reproduced the problem. I think your issue is caused by the "Save and fill personal info" setting being enabled in Edge.

If you navigate to edge://settings/personalinfo and disable this feature, you can see this behavior no longer exists.

Or you can also click the "Manage personal info" option in the picture you provided, and then disable it.

I did some simple tests and found that if you need to solve the problem from the code, you need to modify the name attribute of the form's related field.

Like this(do not use attribute values like name or email... and maybe there are others I am not aware of):

<label for="attr1">attr1:</label>
<input type="text" id="FirstName" name="attr1">

<label for="attr2">attr2 :</label>
<input type="text" id="LastName" name="attr2">

<label for="attr3">attr3 :</label>
<input type="email" id="Email" name="attr3" autocomplete="off">

<input type="submit">

I don't recommend this, because good naming helps you understand and maintain the code. Using proper attributes like name and email also helps your code be more accessible for screen readers or other assistive technology.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Xudong Peng
  • 1,463
  • 1
  • 4
  • 9