How is Chrome detecting an input field as credential Autofill?

Question

I have some input fields in my html DOM which have absolutely nothing special, but Chrome offers me the saved credentials when I click on it. This is annoying if you have a field which only contains a persons name for example. As this is not on all of my input fields, there must be a reason why Chrome means that this is a credential field? Does anyone know what is triggering Chrome to offer his credential auto-complete window on an input field?

This is an example:

<label><input type="text" class="feFilterNameId filterInput" value=""></label>

.filterInput /* input box for edit window */.  
{
    font-size: 14px;
    font-weight: normal;
    width: 97%;
    height: 16px;
    color: var(--filter-text-color);  
}

You can add `autocomplete="off"` to disable it – Lk77 Jan 12 '23 at 16:00 — Lk77, Jan 12 '23 at 16:00
No, Chrome is ignoring that – Thallius Jan 12 '23 at 16:10 — Thallius, Jan 12 '23 at 16:10

Lemon891 · Answer 1 · 2023-01-12T16:47:33.327

This article may have helpful information regarding your issue. Hope it helps.

Disabling-Chrome-Autofill

Key bits of information that seem to be the most relevant to your issue:

Use autocomplete="false" instead of autocomplete="off" as the latter does not work on Chrome. (Some say it works, others say it does not. You'll just have to test it yourself)

Here's a quote from the article -

It's silly that we have to resort to this, but the only sure way is to try and confuse the browser as much as possible:

Name your inputs without leaking any information to the browser, i.e. id="field1" instead of id="country".

Set autocomplete="do-not-autofill", basically use any value that won't let the browser recognize it as an autofillable field.

As well as this -

Chrome now ignores . Therefore my original workaround (which I had deleted) is now all the rage.

Simply create a couple of fields and make them hidden with "display:none". Example:

<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display: none" type="text" name="fakeusernameremembered" />
<input style="display: none" type="password" name="fakepasswordremembered" />

Thanks for the link. That helped me much – Thallius Jan 13 '23 at 10:19 — Thallius, Jan 13 '23 at 10:19

score 0 · Answer 2 · answered Jan 13 '23 at 10:25

Using this link

Disabling Chrome Autofill

and trying many things I could find a solution for my problem.

As I do not use forms, I just put a

<form action = "javascript:void(0)"></form>

around the input fields which trigger the autocomplete on mistake.

How is Chrome detecting an input field as credential Autofill?

2 Answers2