Detection when opening autocomplete browser

There are pseudo-classes ( :-webkit-autofill , etc.) for selecting inputs that were autocomplete, but is there a selector or some other solution to detect when the browser autocomplete drop-down list is expanded?

I was hoping that I could change the location of my own autocomplete dropdown when the browser offers autocomplete, because otherwise they overlap, i.e. put my own autocomplete list above the input when browser autocomplete is open, but otherwise it will be shown below the item.

I know that I can completely disable autocomplete, but I would prefer. Is my only other option just to have my own autocomplete always over an element?

This question has been proposed as a duplicate. This question asks: "How do you know if the browser automatically populated a text box?" while my question is: "How do you know when a browser drop-down is displayed?" None of the answers give a solution to my question.

Since my intention seems a little difficult to explain, here is a picture of what I mean:

AutoFill Unpacking

What I'm trying to do is determine if the autofill window will open, i.e. a box with blurry text, currently open or not. All suggested answers relate to detecting when the user actually selected (or hangs) something in the list.

In the situation shown in the image where the drop-down menu is open but nothing is selected, polling for pseudo-selectors returns nothing.

+8
javascript html css
source share
1 answer

It depends. If you use such a mechanism, http://oaa-accessibility.org/example/10/ , this event is associated with the opening of a window. Otherwise, if you want to follow standard HTML, it depends strictly on the fact that the browser visits the web page, as stated at the following link: http://avernet.blogspot.in/2010/11/autocomplete-and-javascript- change.html , The third solution, but partially, is to listen to the same cases of keystrokes that cause the autofill window to open. I mean "keyup" for input, up arrows, down arrows, space keys when the element is focused.

0
source share

All Articles