Detecting Browser Autofill

Question

How do you tell if a browser has auto filled a text-box  Especially with username  amp  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

User · Answer

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);
});

User · Answer

I have perfect solution for this question try this code snippet  Demo is here    x000D   x000D  function ModernForm     x000D      var modernInputElement       js modern input    x000D   x000D      function recheckAllInput     x000D          modernInputElement each function     x000D              if    this  val             x000D                    this  parent   find  label   addClass  focus    x000D                x000D              x000D        x000D   x000D      modernInputElement on  click   function     x000D            this  parent   find  label   addClass  focus    x000D          x000D      modernInputElement on  blur   function     x000D          if    this  val             x000D                this  parent   find  label   removeClass  focus    x000D            else   x000D              recheckAllInput    x000D            x000D          x000D    x000D   x000D  ModernForm    x000D   form sec   x000D    padding  30px  x000D    x000D   form sec  form input wrap   x000D    position  relative  x000D    x000D   form sec  form input wrap label   x000D    position  absolute  x000D    top  25px  x000D    left  15px  x000D    font-size  16px  x000D    font-weight  600  x000D    z-index  1  x000D    color   333  x000D    -webkit-transition  all ease-in-out 0 35s  x000D    -moz-transition  all ease-in-out 0 35s  x000D    -ms-transition  all ease-in-out 0 35s  x000D    -o-transition  all ease-in-out 0 35s  x000D    transition  all ease-in-out 0 35s  x000D    x000D   form sec  form input wrap label focus   x000D    top  5px  x000D    color   a7a9ab  x000D    font-weight  300  x000D    -webkit-transition  all ease-in-out 0 35s  x000D    -moz-transition  all ease-in-out 0 35s  x000D    -ms-transition  all ease-in-out 0 35s  x000D    -o-transition  all ease-in-out 0 35s  x000D    transition  all ease-in-out 0 35s  x000D    x000D   form sec  form input   x000D    width  100   x000D    font-size  16px  x000D    font-weight  600  x000D    color   333  x000D    border  none  x000D    border-bottom  2px solid  d3d4d5  x000D    padding  30px 0 5px 0  x000D    outline  none  x000D    x000D   form sec  form input err   x000D    border-bottom-color   888  x000D    x000D   form sec  cta login   x000D    border  1px solid  ec1940  x000D    border-radius  2px  x000D    background-color   ec1940  x000D    font-size  14px  x000D    font-weight  500  x000D    text-align  center  x000D    color   ffffff  x000D    padding  15px 40px  x000D    margin-top  30px  x000D    display  inline-block  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt form class  form sec  gt  x000D       lt div class  row clearfix  gt  x000D           lt div class  form-group col-lg-6 col-md-6 form input wrap  gt  x000D               lt label gt  x000D                  Full Name x000D               lt  label gt  x000D               lt input type  text  name  name  id  name  class  form input js modern input  gt  x000D           lt  div gt  x000D       lt  div gt  x000D       lt div class  row clearfix  gt  x000D           lt div class  form-group form input wrap col-lg-6 col-md-6  gt  x000D               lt label gt  x000D                  Emaill x000D               lt  label gt  x000D               lt input type  email  name  email  class  form input js modern input  gt  x000D           lt  div gt  x000D       lt  div gt  x000D       lt div class  row clearfix  gt  x000D           lt div class  form-group form input wrap col-lg-12 col-md-12  gt  x000D               lt label gt  x000D                  Address Line 1 x000D               lt  label gt  x000D               lt input type  text  name  address  class  form input js modern input  gt  x000D           lt  div gt  x000D       lt  div gt  x000D       lt div class  row clearfix  gt  x000D           lt div class  form-group col-lg-6 col-md-6 form input wrap  gt  x000D               lt label gt  x000D                  City x000D               lt  label gt  x000D               lt input type  text  name  city  class  form input js modern input  gt  x000D           lt  div gt  x000D           lt div class  form-group col-lg-6 col-md-6 form input wrap  gt  x000D               lt label gt  x000D                  State x000D               lt  label gt  x000D               lt input type  text  name  state  class  form input js modern input  gt  x000D           lt  div gt  x000D       lt  div gt  x000D       lt div class  row clearfix  gt  x000D           lt div class  form-group col-lg-6 col-md-6 form input wrap  gt  x000D               lt label gt  x000D                  Country x000D               lt  label gt  x000D               lt input type  text  name  country  class  form input js modern input  gt  x000D           lt  div gt  x000D           lt div class  form-group col-lg-4 col-md-4 form input wrap  gt  x000D               lt label gt  x000D                  Pin x000D               lt  label gt  x000D               lt input type  text  name  pincode  class  form input js modern input  gt  x000D           lt  div gt  x000D       lt  div gt  x000D       lt div class  row cta sec  gt  x000D           lt div class  col-lg-12  gt  x000D               lt button type  submit  class  cta login  gt Submit lt  button gt  x000D           lt  div gt  x000D       lt  div gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

My solution is         fn onAutoFillEvent   function  callback            var el     this               lastText                   maxCheckCount   10              checkCount   0            function infunc                 var text   el val                 if  text    lastText                    lastText   text                  callback el                             if  checkCount  gt  maxCheckCount                    return false                            checkCount                setTimeout infunc  100                               group  gt  input   each function  i  element          var el     element          el onAutoFillEvent            function                    el addClass  used

User · Answer

The problem is autofill is handled differently by different browsers  Some dispatch the change event  some don t  So it is almost impossible to hook onto an event which is triggered when browser autocompletes an input field    Change event trigger for different browsers    For username password fields    Firefox 4  IE 7  and IE 8 don t dispatch the change event  Safari 5 and Chrome 9 do dispatch the change event   For other form fields    IE 7 and IE 8 don t dispatch the change event  Firefox 4 does dispatch the change change event when users select a value from a list of suggestions and tab out of the field  Chrome 9 does not dispatch the change event  Safari 5 does dispatch the change event      You best options are to either disable autocomplete for a form using autocomplete  off  in your form or poll at regular interval to see if its filled   For your question on whether it is filled on or before document ready again it varies from browser to browser and even version to version  For username password fields only when you select a username password field is filled  So altogether you would have a very messy code if you try to attach to any event   You can have a good read on this HERE

User · Answer

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

User · Answer

I was reading a lot about this issue and wanted to provide a very quick workaround that helped me   let style   window getComputedStyle document getElementById  email      if  style  amp  amp  style backgroundColor     inputBackgroundNormalState        this inputAutofilledByBrowser   true       where inputBackgroundNormalState for my template is  rgb 255  255  255     So basically when browsers apply autocomplete they tend to indicate that the input is autofilled by applying a different  annoying  yellow color on the input   Edit   this works for every browser

User · Answer

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

User · Answer

To detect email for example  I tried  on change  and a mutation observer  neither worked  setInterval works well with LinkedIn auto-fill  not revealing all my code  but you get the idea  and it plays nice with the backend if you add extra conditions here to slow down the AJAX  And if there s no change in the form field  like they re not typing to edit their email  the lastEmail prevents pointless AJAX pings      lastEmail needs scope outside of setInterval for persistence  var lastEmail    nobody   window setInterval function        Auto-fill detection is hard      var theEmail       email-input   val        if             theEmail includes         amp  amp            theEmail    lastEmail                   lastEmail   theEmail             Do some AJAX          1000      Check the field every 1 second

User · Answer

Just in case someone is looking for a solution  just as I was today   to listen to a browser autofill change  here s a custom jquery method that I ve built  just to simplify the proccess when adding a change listener to an input         fn allchange   function  callback            var me   this          var last               var infunc   function                  var text     me  val                if  text    last                    last   text                  callback                              setTimeout infunc  100                     setTimeout infunc  100            You can call it like this       myInput   allchange function          alert  change

User · Answer

try in CSS  input -webkit-autofill       border-color   9B9FC4  important

User · Answer

I was looking for a similar thing  Chrome only    In my case the wrapper div needed to know if the input field was autofilled  So I could give it extra css just like Chrome does on the input field when it autofills it  By looking at all the answers above my combined solution was the following          make a function to use it in multiple places     var checkAutoFill   function           input -webkit-autofill   each function              this  closest   input-wrapper   addClass  autofilled                      Put it on the  input  event      happens on every change in an input field         html   on  input   function             input-wrapper   removeClass  autofilled        checkAutoFill               trigger it also inside a timeOut event      happens after chrome auto-filled fields on page-load      setTimeout function         checkAutoFill       0     The html for this to work would be   lt div class  input-wrapper  gt       lt input type  text  name  firstname  gt   lt  div gt

User · Answer

For google chrome autocomplete  this worked for me   if      textbox   is   -webkit-autofill                  the value in the input field of the form was filled in with google chrome autocomplete

User · Answer

I succeeded on chrome with        setTimeout         function                  input password   focus                  input username   focus              console log     input username   val               console log     input password   val                   500

User · Answer

in 2020  this is what worked for me in chrome     wait 0 1 sec to execute action after detecting autofill    check if input username is autofilled by browser    enable  quot login quot  button for click to submit form    window  on  quot load quot   function           setTimeout function                if     quot  UserName quot   is  quot input -webkit-autofill quot                   quot  loginbtn quot   prop  disabled   false              100

User · Answer

Solution for WebKit browsers  From the MDN docs for the  -webkit-autofill CSS pseudo-class       The  -webkit-autofill CSS pseudo-class matches when an  element has its value autofilled by the browser   We can define a void transition css rule on the desired  lt input gt  element once it is  -webkit-autofilled  JS will then be able to hook onto the animationstart event   Credits to the Klarna UI team  See their nice implementation here    CSS rules JS hook

User · Answer

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

User · Answer

In Chrome and Edge  2020  checking for  -webkit-autofill will tell you that the inputs have been filled   However  until the user interacts with the page in some way  your JavaScript cannot get the values in the inputs  Using    x   focus   and    x   blur   or triggering a mouse event in code don t help  See https   stackoverflow com a 35783761 32429

User · Answer

After research the issue is that webkit browsers does not fire change event on autocomplete  My solution was to get the autofill class that webkit adds and trigger change event by myself   setTimeout function      if    input -webkit-autofill   length  gt  0         do some stuff      300    Here is a link for the issue in chromium  https   bugs chromium org p chromium issues detail id 636425

User · Answer

For anyone looking for a 2020 pure JS solution to detect autofill  here ya go  Please forgive tab errors  can t get this to sit nicely on SO       Chose the element you want to select - in this case input     var autofill   document getElementsByTagName  input        for  var i   0  i  lt  autofill length  i              Wrap this in a try catch because non webkit browsers will log errors on this pseudo element       try          if  autofill i  matches   -webkit-autofill                    Do whatever you like with each autofilled element                         catch error           return false

User · Answer

I know this is an old thread but I can imagine many comes to find a solution to this here   To do this  you can check if the input s  has value s  with     function         setTimeout function             if      inputID   val   length  gt  0                   YOUR CODE                  100         I use this myself to check for values in my login form when it s loaded to enable the submit button  The code is made for jQuery but is easy to change if needed

User · Answer

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

User · Answer

I used the blur event on the username to check if the pwd field had been auto-filled        userNameTextBox   blur function              if      userNameTextBox   val                            userNameTextBox   val  User Name                      if      passwordTextBox   val                            passwordTextBoxClear   hide       textbox with  Password  text in it                 passwordTextBox   show                        This works for IE  and should work for all other browsers  I ve only checked IE

User · Answer

On chrome  you can detect autofill fields by settings a special css rule for autofilled elements  and then checking with javascript if the element has that rule applied   Example   CSS  input -webkit-autofill     -webkit-box-shadow  0 0 0 30px white inset      JavaScript    let css       selector   css  box-shadow     if  css match  inset        console log  autofilled        selector

User · Answer

If you only want to detect whether auto-fill has been used or not  rather than detecting exactly when and to which field auto-fill has been used  you can simply add a hidden element that will be auto-filled and then check whether this contains any value   I understand that this may not be what many people are interested in    Set the input field with a negative tabIndex and with absolute coordinates well off the screen   It s important that the input is part of the same form as the rest of the input   You must use a name that will be picked up by Auto-fill  ex   secondname     var autofilldetect   document createElement  input    autofilldetect style position    absolute   autofilldetect style top    -100em   autofilldetect style left    -100em   autofilldetect type    text   autofilldetect name    secondname   autofilldetect tabIndex    -1     Append this input to the form and check its value on form submit

User · Answer

I had a hard time detecting auto-fill in Firefox  This is the only solution that worked for me   Demo  HTML    lt div class  inputFields  gt      lt div class  f o  gt         lt div class  field set  gt           lt label class  phold  gt User lt  label gt           lt input type  tel  class  form field   autocomplete  off  value    maxlength  50  gt         lt  div gt      lt  div gt      lt div class  f o  gt         lt div class  field set  gt            lt label class  phold  gt Password lt  label gt            lt input type  password  class  form field   autocomplete  off  value    maxlength  50  gt         lt  div gt      lt  div gt   lt  div gt    CSS      Detect autofill for Chrome     inputFields input -webkit-autofill       animation-name  onAutoFillStart      transition  background-color 50000s ease-in-out 0s     inputFields input not  -webkit-autofill        animation-name  onAutoFillCancel      keyframes onAutoFillStart       keyframes onAutoFillCancel      inputFields     max-width  414px      field set  phold    display  inline-block    position  absolute    font-size  14px    color   848484    -webkit-transform  translate3d 0 8px 0     -ms-transform  translate3d 0 8px 0     transform  translate3d 0 8px 0     -webkit-transition  all 200ms ease-out    transition  all 200ms ease-out    background-color  transparent    -webkit-backface-visibility  hidden    backface-visibility  hidden    margin-left  8px    z-index  1    left  0    pointer-events  none      field set  phold active      font-size  12px     -webkit-transform  translate3d 0 -8px 0     -ms-transform  translate3d 0 -8px 0     transform  translate3d 0 -8px 0     background-color   FFF    padding-left  3px    padding-right  3px      field set input type  text     field set select   field set input type  tel     field set input type  password         height  36px      field set input type  text     field set input type  tel     field set input type  password     field set select   field set textarea       box-sizing  border-box      width  100       padding  5px      -webkit-appearance  none      -moz-appearance  none      appearance  none      border  1px solid  ababab      border-radius  0      field set       margin-bottom  10px      position  relative      inputFields  f o       width  100       line-height  1 42857143      float  none      JavaScript          detect auto-fill when page is loading     window  on  load   function            for sign in forms when the user name and password are filled by browser     getAutofill   inputFields             function getAutofill parentClass        if    parentClass      form field   length  gt  0              var formInput     parentClass      form field          formInput each function                  for Chrome     this  css  animation-name       onAutoFillStart             for Firefox    this  val                 if    this  css  animation-name       onAutoFillStart       this  val                        this  siblings   phold   addClass  phold active              else               this  siblings   phold   removeClass  phold active                                        document  ready function           document  on  click    phold  function            this  siblings  input  textarea   focus                  document  on  focus    form field   function            this  siblings   phold   addClass  phold active                    blur for Chrome and change for Firefox       document  on  blur change    form field   function          var  this     this         if   this val   length    0                      this  siblings   phold   removeClass  phold active            else             this  siblings   phold   addClass  phold active                            case when form is reloaded due to errors     if      form field   length  gt  0          var formInput       form field          formInput each function            if    this  val                        this  siblings   phold   addClass  phold active              else               this  siblings   phold   removeClass  phold active                                        For Chrome I use   if    this  css  animation-name       onAutoFillStart    For Firefox   if    this  val

User · Answer

I used this solution for same problem   HTML code should change to this     lt input type  text  name  username    gt   lt input type  text  name  password  id  txt password    gt    and jQuery code should be in document ready       txt password   focus function          this  attr  type   password

User · Answer

I spent few hours resolving the problem of detecting autofill inputs on first page load  without any user action taken  and found ideal solution that works on Chrome  Opera  Edge and on FF too   On Chrome  Opera  Edge problem was solved quite EZ by searching elements with pseudoclass input -webkit-autofill and doing desired actions  in my case i was changing input wrapper class to change label positions with float label pattern   The problem was with Firefox becouse FF does not have such pseudoclass or similar class  as many suggest  quot  -moz-autofill quot   that is visible by simply searching DOM  You also can t find the yellow background of input  The only cause is that browser adds this yellow color by changing filter property  input -moz-autofill  input -moz-autofill-preview   filter  grayscale 21   brightness 88   contrast 161   invert 10   sepia 40   saturate 206      So in case of Firefox You must first search all inputs and get its computed style and then compare to this filter style hardcoded in browser settings  I really dunno why they didnt use simply background color but that strange filter   They making lifes harder    Here is my code working like a charm at my website  https   my oodo pl en modules register login php    lt script type  quot text javascript quot  gt         this is my main function     var checkAutoFill   function          first we detect if we have FF or other browsers       var isFirefox   navigator userAgent toLowerCase   indexOf  firefox    gt  -1      if   isFirefox               input -webkit-autofill   each function              here i have code that adds  quot focused quot  class to my input wrapper and changes          info instatus div  U can do what u want             this  closest   field-wrapper   addClass  focused            document getElementById  quot status quot   innerHTML    quot Your browser autofilled form quot                         if  isFirefox               input   each function            var bckgrnd   window getComputedStyle document getElementById this id   null  getPropertyValue  quot filter quot            if  bckgrnd      grayscale 0 21  brightness 0 88  contrast 1 61  invert 0 1  sepia 0 4  saturate 2 06                if our input has that filter property customized by browserr with yellow background i do as above  change input wrapper class and change status info  U can add your code here              this  closest   field-wrapper   addClass  focused            document getElementById  quot status quot   innerHTML    quot Your Browser autofilled form quot                                  im runing that function at load time and two times more at 0 5s and 1s delay because not all browsers apply that style imediately  Opera does after  300ms and so Edge  Chrome is fastest and do it at first function run    checkAutoFill    setTimeout function     checkAutoFill       500   setTimeout function     checkAutoFill       1000       lt  script gt   I edited above code manually here to throw out some trash not important for You  If its not working for u  than paste into Your IDE and double check the syntax    Of course add some debuging alerts or console logs and customize

User · Answer

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

User · Answer

This is solution for browsers with webkit render engine  When the form is autofilled  the inputs will get pseudo class  -webkit-autofill-  f e  input -webkit-autofill         So this is the identifier what you must check via JavaScript   Solution with some test form    lt form action     method  POST  class  js-filled check  gt        lt fieldset gt            lt label for  test username  gt Test username  lt  label gt           lt input type  text  id  test username  name  test username  value    gt            lt label for  test password  gt Test password  lt  label gt           lt input type  password  id  test password  name  test password  value    gt            lt button type  submit  name  test submit  gt Test submit lt  button gt        lt  fieldset gt    lt  form gt    And javascript     document  ready function          setTimeout function                  js-filled check input not  type submit     each function  i  element                 var el     this                   autofilled    el is    -webkit-autofill      el addClass  auto filled     false               console log  element      el attr  id               autofilled       el is    -webkit-autofill                           200          Problem when the page loads is get password value  even length  This is because browser s security  Also the timeout  it s because browser will fill form after some time sequence    This code will add class auto filled to filled inputs  Also  I tried to check input type password value  or length  but it s worked just after some event on the page happened  So I tried trigger some event  but without success  For now this is my solution  Enjoy

User · Answer

I had the same problem and I ve written this solution   It starts polling on every input field when the page is loading  I ve set 10 seconds but you can tune this value   After 10 seconds it stop polling on every input field and it starts polling only on the focused input  if one   It stops when you blur the input and again starts if you focus one   In this way you poll only when really needed and only on a valid input      This part of code will detect autofill when the page is loading  username and password inputs for example  var loading   setInterval function            input   each function             if    this  val         this  attr  value                    this  trigger  change                         100      After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them setTimeout function         clearInterval loading      10000      Now we just listen on the focused inputs  because user can select from the autofill dropdown only when the input has focus  var focused    document   on  focus    input   function         var  this     this       focused   setInterval function             if   this val        this attr  value                   this trigger  change                     100       on  blur    input   function         clearInterval focused         It does not work quite well when you have multiple values inserted automatically  but it could be tweaked looking for every input on the current form   Something like      This part of code will detect autofill when the page is loading  username and password inputs for example  var loading   setInterval function            input   each function             if    this  val         this  attr  value                    this  trigger  change                         100      After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them setTimeout function         clearInterval loading      10000      Now we just listen on inputs of the focused form var focused    document   on  focus    input   function         var  inputs     this  parents  form   find  input        focused   setInterval function              inputs each function                 if    this  val         this  attr  value                        this  trigger  change                                     100       on  blur    input   function         clearInterval focused

User · Answer

This works for me in the latest Firefox  Chrome  and Edge       email   on  blur input   function

User · Answer

There does appear to be a solution to this that does not rely on polling  at least for Chrome   It is almost as hackish  but I do think is marginally better than global polling   Consider the following scenario    User starts to fill out field1 User selects an autocomplete suggestion which autofills field2 and field3   Solution  Register an onblur on all fields that checks for the presence of auto-filled fields via the following jQuery snippet     -webkit-autofill    This won t be immediate since it will be delayed until the user blurs field1 but it doesn t rely on global polling so IMO  it is a better solution   That said  since hitting the enter key can submit a form  you may also need a corresponding handler for onkeypress   Alternately  you can use global polling to check     -webkit-autofill

[javascript] Detecting Browser Autofill

Examples related to javascript

Examples related to jquery

Examples related to events

Examples related to event-handling

Examples related to autofill