javascript - Call a function if browser autofills an input field -

i'm trying invoke function detects whether browser has autofilled field, , if so, add class it.

i found thread solution works partially: https://stackoverflow.com/a/25393087

here's integration of it:

$.fn.allchange = function (callback) {     var me = this;     var last = "";     var infunc = function () {         var text = $(me).val();         if (text != last) {             last = text;             callback();         }         settimeout(infunc, 10);     }     settimeout(infunc, 10); };  $(".input").allchange(function () {     $('.input').addclass('not--empty'); }); 

the problem i'm having have function checks change input on blur , adds class input. however, above function causing added instances of '.input'.

i think solution invoke function on autofilled element, when run function below, doesn't work:

$(".input").allchange(function () {     $(this).addclass('not--empty'); }); 

any ideas how working?

edit: thought i'd add image clarify i'm referring to:

so turned out simple solution – , may not work browsers, works flawlessly chrome/firefox/safari latest, application fine.

settimeout(function() {     $('.input:-webkit-autofill').each(function() {         var elem = $(this);         $(elem).addclass('not--empty');     }) },100);