CODEWITHSUNDEEP
javascripthtmlcssbrowserautocomplete
Schlaus
Schlaus

Reputation: 19182

Detecting when browser's autofill is open

There are pseudo-classes (:-webkit-autofill etc.) for selecting inputs that have been autofilled, but is there a selector or some other solution for detecting when a browser's autofill dropdown is open?

I was hoping I could change the placement of my own autocomplete dropdown list when a browser is offering autofill, because otherwise they overlap, ie. place my own autocomplete list above an input when the browser's autofill is open, but otherwise have it show below the element.

I know I could disable autofill altogether, but I'd rather not. Is my only other option to just have my own autocomplete always appear above the element?

This question was suggested as a duplicate. That question asks "How do you tell if a browser has auto filled a text-box?" while my question is "How do you tell when a browser's autofill dropdown is open?" None of the answers provide a solution to my question.

Since my intention seems a bit hard to explain, here's a picture of what I mean:

Autofill dropdown

What I'm trying to do is to detect whether the autofill dropdown, ie. the box with blurred text, is currently open or not. All the suggested answers deal with detecting when a user has actually selected (or is hovering over) something in the list.

In the situation shown in the image, where the dropdown is open but nothing has been selected, polling for pseudo selectors returns nothing.

Upvotes: 23

Views: 1555

Answers (1)

morels
morels

Reputation: 2105

It depends. If you use a mechanism like this http://oaa-accessibility.org/example/10/ there is an event associated to the window opening. Otherwise, if you want to follow the standard HTML it depends strictly to the browser is visiting the webpage as it is said following this link: http://avernet.blogspot.in/2010/11/autocomplete-and-javascript-change.html. A third solution, but partial, is to listen to the same keypress cases that trigger an autofill-window to open. I mean 'keyup' on enter, up-arrow, down-arrow, space keys when an element is focused.

Upvotes: 1

Related Questions