Stopping "helpful" auto-fill suggestions

[Ben Bacarisse]

Short version: how can I stop as many browsers as possible from offering
to supply names, addresses, emails and so on when users fill in a form
that has nothing to do with their details?

Longer version: I have a web app where users have to enter data about
other people. Most browsers offer to fill in the user's name when a
form field "looks like" a name field, but this is annoying for my users
because the one name they will never be entering is their own! The
annoyance is partly just that the "offer" gets in the way, but also
because on some browsers (e.g. Chrome on a phone) the offer involves
chrome drawing a bar above the virtual keyboard taking up scarce screen
space and, in a couple of cases, obscuring other significant controls.

Advice from the web suggests that, for some recent browsers, putting
"autofill=xzzy-or-some-other-garbage" will help. For Chrome on Android,
that stops names (for example) being suggested, but a blank bar with a
key, a credit card and a location icon still pops up. I.e. it seems to
prevent chrome from knowing /what/ to offer, but does not prevent the
waste of space, so this does not help at all.

A secondary concern, which I have so far not investigated, is whether
filling in these details will cause my user's browsers to fill up with
other people's details.

What would be ideal is some setting like autofill=alien that would alert
the browser to the fact that this form is not about the user. Judging
by the number of reports of similar issues that I see, there is no good
solution, but then the web has long ceased to be a place populated with
expert advice so I hold out a glimmer of hope...

--
Ben.

[JJ]

JavaScript can be used to set up a 100ms fire-once timer when the web page
has been loaded, where when triggered, it'll reset forms and/or clear all
form fields. That should remove auto-filled form fields.

[Jukka K. Korpela]

Ben Bacarisse wrote:

> Short version: how can I stop as many browsers as possible from offering
> to supply names, addresses, emails and so on when users fill in a form
> that has nothing to do with their details?

Short answer: use the attribute autocomplete="off" on the <input>
element(s) or, to affect all fields in a form, on the <form> element.
Regarding browser support, see
https://caniuse.com/?search=autocomplete

> Advice from the web suggests that, for some recent browsers, putting
> "autofill=xzzy-or-some-other-garbage" will help. For Chrome on Android,
> that stops names (for example) being suggested, but a blank bar with a
> key, a credit card and a location icon still pops up.

I cannot figure out what you mean here. A code sample might help.

Anyway, there are various quirks related to the autocomplete attribute
and to various browsers, e.g. for password fields, so a long answer
could be really long. There are various cases discussed at
https://stackoverflow.com/questions/2530/how-do-you-disable-browser-autocomplete-on-web-form-field-input-tags

[Ben Bacarisse]

"Jukka K. Korpela" <juk...@gmail.com> writes:

> Ben Bacarisse wrote:
>
>> Short version: how can I stop as many browsers as possible from offering
>> to supply names, addresses, emails and so on when users fill in a form
>> that has nothing to do with their details?
>
> Short answer: use the attribute autocomplete="off" on the <input> element(s)
> or, to affect all fields in a form, on the <form> element. Regarding browser
> support, see
> https://caniuse.com/?search=autocomplete

Thank you. I should have mentioned that I'd tried the supposed standard
solution. Unfortunately it does not stop Chrome which I know is popular
with my target users. I am beginning to think this is just a Chrome
issue, though I don't use other browsers (except Epiphany) well enough
to know how exactly how their form filling works.

>> Advice from the web suggests that, for some recent browsers, putting
>> "autofill=xzzy-or-some-other-garbage" will help. For Chrome on Android,
>> that stops names (for example) being suggested, but a blank bar with a
>> key, a credit card and a location icon still pops up.
>
> I cannot figure out what you mean here. A code sample might help.

The problem I am describing here is a UI one. Anyway, the code (to use
the "proper" attribute) is

<input type=tel name=number autocomplete=off>
<button type=submit>save</button>

(wrapped in a form, of course)

With recent Chrome on Android, when I tap in the input field, the
browser adds a solid white bar above the virtual keyboard with my phone
number in it. With a junk value for autocomplete the browser (Chrome)
won't offer my number by still adds a solid white bar with three
"helpful" icons on it. I'd really like to be able to tell Chrome that
there is no useful autocomplete action and not to clutter the UI by
trying.

(I've also tried autocomplete=off on the form as well, since reports
suggest that this, too, alters the behaviour in some browsers.)

> Anyway, there are various quirks related to the autocomplete attribute and
> to various browsers, e.g. for password fields, so a long answer could be
> really long.

A lot of the posts I've seen discuss passwords fields and that's the
only case I don't care about! The app does have both a 'login' and a
'change password' page but these are cases where the data /do/ belong to
the user, and so any autocomplete the browser wants to do there is fine
with me.

It's offering to put the user's phone number into a field when I know
they are entering someone else's number that is (slightly) bothersome.

> There are various cases discussed at
> https://stackoverflow.com/questions/2530/how-do-you-disable-browser-autocomplete-on-web-form-field-input-tags

That's the thread where I got the suggestion of using a junk attribute
value from, though I seem to recall the suggestion mentioned autofill
rather than autocomplete. That may have been a typo since autofill is
the name of a related CSS pseudo-class.

Since most reports of browsers ignoring autocomplete=off seem to relate
to login forms, maybe my best option is simply to suggest that users
avoid Chrome or live with the minor annoyance.

--
Ben.

[Ben Bacarisse]

Can you say a bit more? I can't clear the fields since there is likely
to be important data in them. Do you mean calling the reset method on
the form element? I'm not sure this will do anything since 100ms after
load the user won't have had time to interact with the form at all.

--
Ben.

[Arno Welzel]

Ben Bacarisse, 2023-03-29 21:40:

> Short version: how can I stop as many browsers as possible from offering
> to supply names, addresses, emails and so on when users fill in a form
> that has nothing to do with their details?

Yes.

For the whole form: <form autocomplete="off">
For a single input element: <input type="text" autocomplete="off">

Also see:

<https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion>

[...]

> Advice from the web suggests that, for some recent browsers, putting
> "autofill=xzzy-or-some-other-garbage" will help. For Chrome on Android,

No, this is not correct, see above.


--
Arno Welzel
https://arnowelzel.de

[Arno Welzel]

Arno Welzel, 2023-04-01 00:18:

Ok, got it - it's not about stopping autofill but stopping Chrome from
showing password suggestions. But I think, this can not be done in a
Website only.

Also the workaround using "readonly" and disabling this when focusing
the element does not work - seems Chrome seems to ignore that completely:

<https://arnowelzel.de/samples/noac.html>

Maybe this is the result of people started complaining that they are not
able to save passwords because of autocomplete="off" and at some point
Chrome ignored that then to solve this.

[Ben Bacarisse]

Arno Welzel <use...@arnowelzel.de> writes:

> Ben Bacarisse, 2023-03-29 21:40:
>
>> Short version: how can I stop as many browsers as possible from offering
>> to supply names, addresses, emails and so on when users fill in a form
>> that has nothing to do with their details?
>
> Yes.
>
> For the whole form: <form autocomplete="off">
> For a single input element: <input type="text" autocomplete="off">

Thanks. I should have said I'd tried the supposedly correct solution.
It's easy to find what /should/ work, the trouble is that it does not work
for recent versions of Chrome!

> [...]
>> Advice from the web suggests that, for some recent browsers, putting
>> "autofill=xzzy-or-some-other-garbage" will help. For Chrome on Android,
>
> No, this is not correct, see above.

Indeed. However, giving a junk value for autocorrect (there was a typo
in the attribute name -- either my typo or one copied from where I saw
the suggestion -- does get one a step closer, at least for Chrome. Of
course it's likely to stop helping at any time and will likely mess up
on other browsers so it's more of a curiosity than anything one could
use.

--
Ben.

[Ben Bacarisse]

Arno Welzel <use...@arnowelzel.de> writes:

> Arno Welzel, 2023-04-01 00:18:
>
>> Ben Bacarisse, 2023-03-29 21:40:
>>
>>> Short version: how can I stop as many browsers as possible from offering
>>> to supply names, addresses, emails and so on when users fill in a form
>>> that has nothing to do with their details?
>>
>> Yes.
>>
>> For the whole form: <form autocomplete="off">
>> For a single input element: <input type="text" autocomplete="off">
>>
>> Also see:
>>
>> <https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion>
>>
>> [...]
>>> Advice from the web suggests that, for some recent browsers, putting
>>> "autofill=xzzy-or-some-other-garbage" will help. For Chrome on Android,
>>
>> No, this is not correct, see above.
>
> Ok, got it - it's not about stopping autofill but stopping Chrome from
> showing password suggestions. But I think, this can not be done in a
> Website only.

I'm talking about name, telephone number and email fields. For my
use-case, any passwords will be those of the user, so a suggested
password is fine. The problem I am seeing is that users will be
entering other people's names and so on, and yet their own details will
keep popping up as suggestions (in Chrome). It's a comparatively
trivial issue on a desktop, but on the phone version the suggestions
take up valuable screen space.

> Also the workaround using "readonly" and disabling this when focusing
> the element does not work - seems Chrome seems to ignore that completely:
>
> <https://arnowelzel.de/samples/noac.html>

That document uses autofill=none. Is that a Chrome extension?

Combining autocorrect=off and autofill=none works for my desktop Chrome,
but not for Android Chrome where although specific suggested names are
not offered, the bar still pops up with three icons for address, payment
and password filling.

> Maybe this is the result of people started complaining that they are not
> able to save passwords because of autocomplete="off" and at some point
> Chrome ignored that then to solve this.

That's likely, though I would not put autocomplete=off on a password
field.

--
Ben.

[Arno Welzel]

Ben Bacarisse, 2023-04-01 01:24:

> Arno Welzel <use...@arnowelzel.de> writes:
[...]

>> Ok, got it - it's not about stopping autofill but stopping Chrome from
>> showing password suggestions. But I think, this can not be done in a
>> Website only.
>
> I'm talking about name, telephone number and email fields. For my
> use-case, any passwords will be those of the user, so a suggested
> password is fine. The problem I am seeing is that users will be
> entering other people's names and so on, and yet their own details will
> keep popping up as suggestions (in Chrome). It's a comparatively
> trivial issue on a desktop, but on the phone version the suggestions
> take up valuable screen space.

Yes, I see. However most mobile devices are nowadays quite tall with
"FullHD+" at 1080*2560 pixels so screen space should not be a real issue
in many cases.

>> Also the workaround using "readonly" and disabling this when focusing
>> the element does not work - seems Chrome seems to ignore that completely:
>>
>> <https://arnowelzel.de/samples/noac.html>
>
> That document uses autofill=none. Is that a Chrome extension?

No, just trial/error.

> Combining autocorrect=off and autofill=none works for my desktop Chrome,
> but not for Android Chrome where although specific suggested names are
> not offered, the bar still pops up with three icons for address, payment
> and password filling.

Yes, same here and not only in Chrome but also Vivaldi which is Chrome
based.

[Ben Bacarisse]

Arno Welzel <use...@arnowelzel.de> writes:

> Ben Bacarisse, 2023-04-01 01:24:
>
>> Arno Welzel <use...@arnowelzel.de> writes:
> [...]
>>> Ok, got it - it's not about stopping autofill but stopping Chrome from
>>> showing password suggestions. But I think, this can not be done in a
>>> Website only.
>>
>> I'm talking about name, telephone number and email fields. For my
>> use-case, any passwords will be those of the user, so a suggested
>> password is fine. The problem I am seeing is that users will be
>> entering other people's names and so on, and yet their own details will
>> keep popping up as suggestions (in Chrome). It's a comparatively
>> trivial issue on a desktop, but on the phone version the suggestions
>> take up valuable screen space.
>
> Yes, I see. However most mobile devices are nowadays quite tall with
> "FullHD+" at 1080*2560 pixels so screen space should not be a real issue
> in many cases.

The worst effect is that Chrome does not scroll the screen to take this
into account, so in at least one case I've seen, when then input field
is followed by, say, a submit button, the button will be obscured by the
bar. Chrome scrolls the page properly to account for the keyboard
popping up, but not for the extra bar. It's a trivial matter, but it's
the kind of thing that will annoy some users.

>>> Also the workaround using "readonly" and disabling this when focusing
>>> the element does not work - seems Chrome seems to ignore that completely:
>>>
>>> <https://arnowelzel.de/samples/noac.html>
>>
>> That document uses autofill=none. Is that a Chrome extension?
>
> No, just trial/error.
>
>> Combining autocorrect=off and autofill=none works for my desktop Chrome,
>> but not for Android Chrome where although specific suggested names are
>> not offered, the bar still pops up with three icons for address, payment
>> and password filling.
>
> Yes, same here and not only in Chrome but also Vivaldi which is Chrome
> based.

Useful to know, thanks.

--
Ben.

[Eli the Bearded]

In comp.infosystems.www.authoring.html,
Ben Bacarisse <ben.u...@bsb.me.uk> wrote:

> Arno Welzel <use...@arnowelzel.de> writes:
>> Yes, I see. However most mobile devices are nowadays quite tall with
>> "FullHD+" at 1080*2560 pixels so screen space should not be a real issue
>> in many cases.

Most does not equal all. My daily device(*) is 480x854.

> The worst effect is that Chrome does not scroll the screen to take this
> into account, so in at least one case I've seen, when then input field
> is followed by, say, a submit button, the button will be obscured by the
> bar. Chrome scrolls the page properly to account for the keyboard
> popping up, but not for the extra bar. It's a trivial matter, but it's
> the kind of thing that will annoy some users.

Looking at <https://arnowelzel.de/samples/noac.html>, while adding
text in the third input box:

https://i.imgur.com/yJLhXqx.jpg

I can't see where I'm typing because I can't scroll (Firefox on Android
in my case).

Elijah
------
(*) Unihertz Jelly 2

[Ben Bacarisse]

That's bad. The whole page fits on my screen, even with the keyboard
open, so the closest I can do to test is to zoom the page. When I do
that, Chrome, Opera and Firefox all correctly scroll the page so the box
is above the virtual keyboard.

--
Ben.

[Arno Welzel]

Eli the Bearded, 2023-04-09 22:36:

> In comp.infosystems.www.authoring.html,
> Ben Bacarisse <ben.u...@bsb.me.uk> wrote:
>> Arno Welzel <use...@arnowelzel.de> writes:
>>> Yes, I see. However most mobile devices are nowadays quite tall with
>>> "FullHD+" at 1080*2560 pixels so screen space should not be a real issue
>>> in many cases.
>
> Most does not equal all. My daily device(*) is 480x854.

Even my old Samsung Galaxy S3 with a 4.5 inch screen was already
720*1080 - and this was already 11(!) years ago.

Well - "Unihertz Jelly 2" is not a regular smartphone. It is intended to
be a *very* tiny phone with a display which has only 3 inch. That also
means you have to live with compromises.

>> The worst effect is that Chrome does not scroll the screen to take this
>> into account, so in at least one case I've seen, when then input field
>> is followed by, say, a submit button, the button will be obscured by the
>> bar. Chrome scrolls the page properly to account for the keyboard
>> popping up, but not for the extra bar. It's a trivial matter, but it's
>> the kind of thing that will annoy some users.
>
> Looking at <https://arnowelzel.de/samples/noac.html>, while adding
> text in the third input box:
>
> https://i.imgur.com/yJLhXqx.jpg
>
> I can't see where I'm typing because I can't scroll (Firefox on Android
> in my case).

This seems to be a bug of Firefox or the Android version on the phone in
this case.