23

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.

Suresh Karia
  • 17,550
  • 18
  • 67
  • 85
Schlaus
  • 18,144
  • 10
  • 36
  • 64
  • This article might help: http://www.html5rocks.com/en/tutorials/forms/requestautocomplete/#toc-after-calling-rac –  Aug 20 '15 at 08:11
  • possible duplicate of [Detecting Browser Autofill](http://stackoverflow.com/questions/11708092/detecting-browser-autofill) – Mark Hill Sep 03 '15 at 14:34
  • 1
    @MarkHill Not a duplicate, I've edited in a clarification. – Schlaus Sep 03 '15 at 18:53
  • This answer here can give you an insight: http://stackoverflow.com/a/6680319/652579 You can poll for changes in the DOM, once you find ':-webkit-autofill', you can then get their width/height and place your auto complete elements after them. – ThiagoPXP Sep 09 '15 at 04:19
  • 1
    @ThiagoPXP I'm sorry, I don't get how that would work. The autofill-selector only applies once something has been filled, not when the actual native dropdown opens. Even ignoring that, the native autofill dropdown wont affect the selected input's height. Could you please clarify if I'm just not getting it? – Schlaus Sep 09 '15 at 19:01
  • I'm not sure if that auto-fill box is part of HTML or the browser itself, because I can't seem to find it when I'm in the developer tools – Adjit Sep 09 '15 at 19:30
  • 1
    @Adjit It's not, that would be a privacy issue. I'm not looking to access the actual box, I'd just like to know if it's open or not, so I can move my own autocomplete above the input. – Schlaus Sep 09 '15 at 19:36
  • @Schlaus Did you find a solution for this? We want to offer google maps powered autocomplete on our site, but it's very confusing when both it and the browser open autofill popups for addresses. – MaxGabriel Oct 18 '18 at 23:40
  • Well, you could: define a pixel, that should be visible. Lets say the upper left corner of your suggest box. Place a pixel there - that has a specific color. When the element is focused AND the suggest box is in the viewport BUT the pixel is not of your specific color - you COULD assume a ui element covers it. To determine the color you could use a combination of canvas and css-reflections... Very complicated and pretty shitty but i dont know of any other way :) i would simply disable autocomplete – Philipp Wrann Nov 09 '19 at 20:05

1 Answers1

1

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.

morels
  • 2,095
  • 17
  • 24