AutoFill Detection

Question

After a long struggle, I finally discovered the only way to clear the autocomplete style in every browser:

$('input').each(function() { var $this = $(this); $this.after($this.clone()).remove(); }); 

The problem is that it cannot be run in load , because autocomplete of fields occurs sometime after the fact. Right now I am running it for 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 it seems safe even for the slowest systems, but it really is not elegant. Are there any reliable events or checks that I can do to check if autocompletion is complete?

EDIT: This is autocomplete.

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

Answer 1

There is an error open in http://code.google.com/p/chromium/issues/detail?id=46543#c22 related to this, it seems that in the end (maybe) you can just write over the style by by default using the !important selector, which would be the most elegant solution. The code would be something like this:

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

So far, the error is still open, and it looks like your hacker solution is the only solution for Chrome, however: a) Chrome does not require setTimeout and b) it looks like Firefox can respect !important or some high-priority CSS selector, as described in Overriding Browser Form Fill and Input Highlight with HTML / CSS . Does it help?

Answer 2

If you use Chrome or Safari, you can use the CSS input:-webkit-autofill to get the filled fields.

Detection Code Example:

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

Answer 3

I suggest you avoid autofill in the first place instead of trying to trick the browser

 <form autocomplete="off"> 

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

If you want to keep the autocomplete behavior , but change the style, maybe you can do something like this (jQuery):

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

Answer 4

 $(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 TO VAR FOR FASTER PROCESSING } }); 

I noticed that the jQuery solution you submitted does not copy attached events. The method I posted works for jQuery 1.5+ and should be the preferred solution as it saves attached events for each object. If you have a solution to iterate over all initialized variables and reinitialize them, then a full 100% working jQuery solution will be available, otherwise you will have to reinitialize the given variables as necessary.

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

then you will need to call: foo = $ ('# foo');

because the original item has been deleted and the clone now exists in its place.