Menu
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:
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.
918
Open your Chrome browser. Click on the three dots at the top right corner. Go to Settings and open Autofill settings. Click on the item (Passwords, Payment methods, Addresses and more) for which you want to disable Autofill.
Browsers are coded to learn and store information when first entered by a user in order to automatically fill text boxes the next time the same information is requested. The feature is called “autofill,” and hackers have turned it into an effective phishing vector.
After you interact with the first field in the address form, the browser shows you a list of saved addresses. You can choose one, and the browser fills in all fields related to the address. Autofill makes filling out forms fast and easy. Not every address form has the same fields, and the order of fields also varies.
The problem is autofill is handled differently by different browsers. Some dispatch the change event, some don't. So it is almost impossible to hook onto an event which is triggered when browser autocompletes an input field. Firefox 4, IE 7, and IE 8 don't dispatch the change event. Safari 5 and Chrome 9 do dispatch the change event.
The code is made for jQuery but is easy to change if needed. On chrome, you can detect autofill fields by settings a special css rule for autofilled elements, and then checking with javascript if the element has that rule applied. input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px white inset; }
To enable or disable autofill in Internet Explorer, follow these steps. Open the Internet Explorer browser. Click Tools in the upper-right corner of the browser window, and select Internet Options. In the window that opens, click the Content tab ( A) and select Settings ( B) in the AutoComplete section.
So when during a second 10*1000=1sec browser fill the autofill value then the callback passed to autofill will be called. In current example it just adds a class. If you have more questions please do not hesitate and just ask :). After research the issue is that webkit browsers does not fire change event on autocomplete.
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.
114
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
