24

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?

Glen Solsberry
  • 11,960
  • 15
  • 69
  • 94
  • Does this answer your question? [Detecting Browser Autofill](https://stackoverflow.com/questions/11708092/detecting-browser-autofill) – Jasper de Vries Jul 29 '21 at 09:48
  • I got surprised this library is not mentioned on answers > https://github.com/matteobad/detect-autofill – wnasich Feb 19 '22 at 13:27

5 Answers5

10

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.

Omu
  • 69,856
  • 92
  • 277
  • 407
jishi
  • 24,126
  • 6
  • 49
  • 75
  • I also tried a similar solution, but the problem is that I set the text to "" and after that the autocompletion by chrome happens putting my credentials there again... – Revious Oct 16 '14 at 11:59
  • 3
    Chrome now overrides the autocomplete off, and decided it's a better UX to just autocomplete everything :-\ – webdevinci May 03 '16 at 12:37
1

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 
}});
Ruzihm
  • 19,749
  • 5
  • 36
  • 48
Lavlesh Mishra
  • 41
  • 3
0

Just in case someone is still 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!");
});
LcSalazar
  • 16,524
  • 3
  • 37
  • 69
  • 1
    While this solution will work, it is to expensive on cpu cycles. [This](http://stackoverflow.com/a/8548572/1057527) is a better solution. – machineaddict Mar 04 '16 at 07:49
0

Have you tried using the onpropertychanged instead of onchange event? That's for IE only though and is the recommended fix on MSDN.

Satyajit
  • 3,839
  • 1
  • 19
  • 14
  • I would, but being a website viewed by hundreds of thousands of people across every browser conceivable, I don't think that would work very well. – Glen Solsberry Feb 08 '11 at 21:04
  • This looks similar: http://stackoverflow.com/questions/343192/why-does-the-javascript-onchange-event-not-fire-if-autocomplete-is-on – Satyajit Feb 08 '11 at 21:35
-2

Here's a pretty good solution that does something similar to what jishi described:

https://web.archive.org/web/20131125153914/http://furrybrains.com/2009/01/02/capturing-autofill-as-a-change-event/

Updated the broken link with Wayback Machine link

RSK
  • 17,210
  • 13
  • 54
  • 74
capnhairdo
  • 25
  • 3
  • Wayback Machine link https://web.archive.org/web/20131125153914/http://furrybrains.com/2009/01/02/capturing-autofill-as-a-change-event/ – RSK Jun 28 '16 at 09:13