5

I am not talking about field autocomplete (when you click on the form's textbox and you get a dropdown with a list of previously entered values) but about the browser autofill feature that fills out the form with your personal data that browser saved previously (first, last, address, organization, phone, email, etc.). In chrome, autofill can be managed here: chrome://settings/autofill

People are using the terms autocomplete and autofill interchangeably, which adds to the confusion (I googled this to death). Everybody is talking about adding autocomplete="off" to your form or form input elements. That works for disabling autocomplete, but the browser's autofill feature still works.

For example, when I click on the telephone or email field, I get dropdowns with previous "entries," and clicking on any of the entries will fill out multiple fields in the form.

Is there way to disable autofill when designing form?

bobetko
  • 5,019
  • 14
  • 58
  • 85
  • Does this answer your question? [Disabling Chrome Autofill](https://stackoverflow.com/questions/15738259/disabling-chrome-autofill) – SuperStormer Feb 25 '21 at 00:31
  • 2
    It doesn't. I've seen that post before. A lot of answers are outdated or simply treat autocomplete and autofill feature as one same thing. – bobetko Mar 02 '21 at 23:37
  • @bobetko Did you get the solution? I am also facing the same problem and almost all the solutions are talking about the workaround. I don't see any solutions. – Iftikhar Ali Ansari Oct 04 '21 at 09:33

3 Answers3

1

Put within tag to prevent auto-fill within forms:

<form autocomplete="off" />
ACE-CM
  • 49
  • 14
0

You should be using autocomplete="chrome-off" for Chrome versions below Chrome88, after that autocomplete="off" should stop autofill (implemented this January, actually).

Spectric
  • 30,714
  • 6
  • 20
  • 43
0

All of the solutions above did not work for me.

Then, I thought that the browser saves the previous values based on the type of the field.

So, if I can switch the field type to a different kind e.g type="password" when I will actually use type="text";

So, once the first character is entered into the field, I will switch to the appropriate type and thus, browser will not be able to track that value.

This worked perfectly for me.

For example,

Solution:


<input name="password" type={password.length ? "text": "password"}/>

Depending on the framework or platform you are using, just dynamically assign the type using the example given above.

Recreate the Problem

Ideally, browser is supposed to remember the last value by its name, but I guess it uses type instead.

For more context, check the code below:

1.

<form>
  <label for="name">Name</label>
  <input type="text" placeholder="John Doe" id="name"/>
<form/>

And

2.

<form>
  <label for="school">School</label>
  <input type="text" placeholder="Enter your school" id="school"/>
<form/>

If the first one has been rendered previously and, on another page, you render the second one, it will autofill with the value of the first one.

Fasunle Kehinde Hussein
  • 17
  • 1
  • 2