Browser Autofill and Javascript triggered events

Question

One of our users just brought up the fact that their browsers Autofill doesn't cause JS onChange events to fire; this causes a problem with user registration for us.

Is this by design? Is there a way to work around it?

Answer 1

One solution I have been using occasionally is to check whether the value of the field/input/select differs from it's defaultValue. defaultValue would be the value that was originally in the markup, and value is the current value aka selected or entered value. This would probably differ even though the form was autopopulated.

If you want to turn off autofill altogether, it might be wise to add autocomplete="off" on fields that are directly connected to your logic.

Answer 2

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

$(window).load(function(){  
  if($('input:-webkit-autofill')){   
    $('input:-webkit-autofill').each(function(){
      //put your conditions here 
    });   
    // RE-INITIALIZE VARIABLES HERE IF YOU SET JQUERY OBJECT'S TO VAR FOR FASTER PROCESSING 
}});