Detecting when the autofill has been filled

Question

After a long struggle, I've finally found out the only way to clear autofill styling in every browser:

$('input').each(function() {
    var $this = $(this);

    $this.after($this.clone()).remove();
});

The problem is, it can't be run in load, because the autofilling of the fields happens sometime after the fact. Right now I'm running it on a timeout of 100 milliseconds after load:

// Kill autofill styles
$(window).on({
    load: function() {
        setTimeout(function() {
            $('.text').each(function() {
                var $this = $(this);

                $this.after($this.clone()).remove();
            });
        }, 100);
    }
});

and that seems safe on even the slowest of systems, but it's really not elegant. Is there some kind of reliable event or check I can make to see if the autofill is complete?

EDIT: This is autofill.

autofill http://dl.dropbox.com/u/2463964/autofill.png

Just curious, why do you want to clear autofilled form fields? — j08691, Mar 17 '12 at 17:49
@j08691: I don't want to clear the autofilled fields (that's not what this does), I want to clear the ugly yellow background that's also unchangeable in CSS. — Ry-, Mar 17 '12 at 17:51
Is the 'onChange' function triggered when they get auto-filled? — ajax333221, Mar 17 '12 at 18:01
Try this attribute-value: `autocomplete='off'` on the inputs. — gdoron is supporting Monica, Mar 17 '12 at 18:03
@gdoron: I don't want to disable autocomplete. I want to disable its styles. — Ry-, Mar 17 '12 at 18:03

score 13 · Answer 1 · edited Jun 16 '12 at 20:46

13

If you're using Chrome or Safari, you can use the input:-webkit-autofill CSS selector to get the autofilled fields.

Example detection code:

setInterval(function() {
    var autofilled = document.querySelectorAll('input:-webkit-autofill');
    // do something with the elements...
}, 500);

edited Jun 16 '12 at 20:46

Ry-

209,133
54
439
449

answered Mar 17 '12 at 18:06

Tyilo

27,548
34
107
190

I'm aware of that selector. However, I neither want any `setInterval` nor `setTimeout` in my code. – Ry- Mar 17 '12 at 18:11
1

This is BY FAR the best solution I have seen to the problem of Chrome and autofill inputs. input:-webkit-autofill is way better than polling and setTimeout(), etc. THANK YOU so much for actually providing an answer to this long-standing issue! – ChrisN Jun 04 '15 at 21:17
3

@ChrisN, this answer uses `setInterval`. – Ry- Jul 07 '15 at 16:47

score 2 · Accepted Answer · edited May 23 '17 at 12:10

2

There's a bug open over at http://code.google.com/p/chromium/issues/detail?id=46543#c22 relating to this, it looks like it might (should) eventually be possible to just write over the default styling with an !important selector, which would be the most elegant solution. The code would be something like:

input {
    background-color: #FFF !important;
}

For now though the bug is still open and it seems like your hackish solution is the only solution for Chrome, however a) the solution for Chrome doesn't need setTimeout and b) it seems like Firefox might respect the !important flag or some sort of CSS selector with high priority as described in Override browser form-filling and input highlighting with HTML/CSS. Does this help?

edited May 23 '17 at 12:10

Community

1
1

answered Mar 17 '12 at 19:11

conartist6

387
3
15

Unfortunately, it does actually need `setTimeout`, and Firefox has the same problem. Believe me, I'm continuing to try variations of them both as we speak :) – Ry- Mar 17 '12 at 19:13
The thread I tacked on at the end also has a solution that has been noted as working, which is to use the input:focus selector and use onload javascript to focus each form element in turn. – conartist6 Mar 18 '12 at 16:15
I did see that, but oddly, it doesn't seem to work for me. I'm using Chrome Canary, so maybe *that* "bug" was fixed :) – Ry- Mar 18 '12 at 16:54

score 0 · Answer 3 · answered Apr 02 '12 at 15:34

0

I propose you avoiding the autofill in first place, instead of trying to trick the browser

<form autocomplete="off">

More information: http://www.whatwg.org/specs/web-forms/current-work/#the-autocomplete

If you want to keep the autofill behaviour but change the styling, maybe you can do something like this (jQuery):

$(document).ready(function() { 
  $("input[type='text']").css('background-color', 'white');
});

answered Apr 02 '12 at 15:34

Marcos Besteiro López

1,424
8
15

1

Please read the comments. We have established that I *do not want to turn autocomplete off*. As for setting the `background-color` to `white`, it doesn't work. This is precisely why I need the workaround. – Ry- Apr 02 '12 at 18:30
Just read, sorry @minitech i'm sorry i really think you will need the timeout, as the forms gets filled by the browser itself after a bit, not the DOM – Marcos Besteiro López Apr 03 '12 at 09:40

Richard Vannauker · Answer 4 · 2013-02-16T16:27:11.947

-1

$(window).load(function()
{
    if ($('input:-webkit-autofill'))
    {
        $('input:-webkit-autofill').each(function()
        {
            $(this).replaceWith($(this).clone(true,true));
        });
        // RE-INITIALIZE VARIABLES HERE IF YOU SET JQUERY OBJECT'S TO VAR FOR FASTER PROCESSING
    }
});

I noticed that the jQuery solution you posted does not copy attached events. The method I have posted works for jQuery 1.5+ and should be the preferred solution as it retains the attached events for each object. If you have a solution to loop through all initialized variables and re-initialize them then a full 100% working jQuery solution would be available, otherwise you have to re-initialize set variables as needed.

for example you do: var foo = $('#foo');

then you would have to call: foo=$('#foo');

because the original element was removed and a clone now exists in its place.

edited Feb 16 '13 at 16:27

answered Feb 15 '13 at 12:52

Richard Vannauker

35
2
6

It's definitely not my preferred solution, though, because a) it uses browser sniffing, which is wrong because Firefox has the same bug and b) it still doesn't work, because there is no timeout. – Ry- Feb 15 '13 at 14:54
What version of Firefox has the bug? So I can edit my comment accordingly, because my current version doesn't exhibit that behavior. If you don't like browsing sniffing just run an if statement to see if that element exists. The main reason you need a check of some sort is because some variables might need to be re-initialized since the original copies are no longer present. Also, if you need a timeout it's easy to plug in, but mine has worked flawlessly without one being present which is why I left it out from my response. – Richard Vannauker Feb 16 '13 at 14:35

Detecting when the autofill has been filled

4 Answers4