Detecting Browser Autofill

Question

How do you tell if a browser has auto filled a text-box? Especially with username & password boxes that autofill around page load.

My first question is when does this occur in the page load sequence? Is it before or after document.ready?

Secondly how can I use logic to find out if this occurred? Its not that i want to stop this from occurring, just hook into the event. Preferably something like this:

if (autoFilled == true) {

} else {

}

If possible I would love to see a jsfiddle showing your answer.

Possible duplicates

DOM event for browser password autofill?

Browser Autofill and Javascript triggered events

--Both these questions don't really explain what events are triggered, they just continuously recheck the text-box (not good for performance!).

Answer 1

From my personal experience, the below code works well with firefox IE and safari, but isn't working very well at picking autocomplete in chrome.

function check(){
clearTimeout(timeObj);
 timeObj = setTimeout(function(){
   if($('#email').val()){
    //do something
   }
 },1500);
}

$('#email').bind('focus change blur',function(){
 check();
});

Below code works better, because it will trigger each time when user clicks on the input field and from there you can check either the input field is empty or not.

$('#email').bind('click', function(){
 check();
});

Answer 2

Here is CSS solution taken from Klarna UI team. See their nice implementation here resource

Works fine for me.

input:-webkit-autofill {
  animation-name: onAutoFillStart;
  transition: background-color 50000s ease-in-out 0s;
}
input:not(:-webkit-autofill) {
  animation-name: onAutoFillCancel;
}

Answer 3

My solution:

Listen to change events as you would normally, and on the DOM content load, do this:

setTimeout(function() {
    $('input').each(function() {
        var elem = $(this);
        if (elem.val()) elem.change();
    })
}, 250);

This will fire the change events for all the fields that aren't empty before the user had a chance to edit them.

Answer 4

I also faced the same problem where label did not detect autofill and animation for moving label on filling text was overlapping and this solution worked for me.

input:-webkit-autofill ~ label {
    top:-20px;
} 

Answer 5

Unfortunately the only reliable way i have found to check this cross browser is to poll the input. To make it responsive also listen to events. Chrome has started hiding auto fill values from javascript which needs a hack.

• Poll every half to third of a second ( Does not need to be instant in most cases )
• Trigger the change event using JQuery then do your logic in a function listening to the change event.

• Add a fix for Chrome hidden autofill password values.

  $(document).ready(function () {
      $('#inputID').change(YOURFUNCTIONNAME);
      $('#inputID').keypress(YOURFUNCTIONNAME);
      $('#inputID').keyup(YOURFUNCTIONNAME);
      $('#inputID').blur(YOURFUNCTIONNAME);
      $('#inputID').focusin(YOURFUNCTIONNAME);
      $('#inputID').focusout(YOURFUNCTIONNAME);
      $('#inputID').on('input', YOURFUNCTIONNAME);
      $('#inputID').on('textInput', YOURFUNCTIONNAME);
      $('#inputID').on('reset', YOURFUNCTIONNAME);
  
      window.setInterval(function() {
          var hasValue = $("#inputID").val().length > 0;//Normal
          if(!hasValue){
              hasValue = $("#inputID:-webkit-autofill").length > 0;//Chrome
          }
  
          if (hasValue) {
              $('#inputID').trigger('change');
          }
      }, 333);
  });
  

Answer 6

There is a new polyfill component to address this issue on github. Have a look at autofill-event. Just need to bower install it and voilà, autofill works as expected.

bower install autofill-event