0

I have a login form where, if the fields are filled with data, a javascript (jquery) adds a class to them.

The problem appears when the fields are auto-filled by Google Chrome if you save the access credentials. Is there a way to check if Chrome (or any other browser) has autofill the field and launch the JS function so the correct classes are applied?

EDIT giving any input from the keyboard/mouse, the script is fired and it works correctly. Unfortunately, I want it working without user input but o page load.

Example below

main.html

<input type="password" class="input100" name="password">

main.js

$('.input100').each(function(){
        $(this).on('blur', function(){
            if($(this).val().trim() != "") {
                $(this).addClass('has-val');
            }
            else {
                $(this).removeClass('has-val');
            }
        })    
    })
NictheDEV
  • 147
  • 12
  • Try on change. Blur happens when the user tabs out, auto fill doesn't do that. – cloned Feb 06 '22 at 10:33
  • @cloned same result. I have also noticed that, when the form is auto-filled after the page has been load, as soon as I click any key on the keyboard or the right/left mouse button, no matter where, the script is fired and works correctly. Unfortunately I need it to work once the page is loaded and without input from the user if the form is autofill – NictheDEV Feb 06 '22 at 10:39
  • Use $(document).ready and then use the same loop without the on blur function. – Grumpy Feb 06 '22 at 10:49
  • @Grumpy still doesn't work. I think a solution could be to make automatically click a keyboard button (such as arrow up) when the page is fully load (as if I do it manually the script fires correctly) – NictheDEV Feb 06 '22 at 10:55
  • Does this answer your question? [Detecting Browser Autofill](https://stackoverflow.com/questions/11708092/detecting-browser-autofill) – cloned Feb 06 '22 at 11:46
  • @cloned nope, unfortunately, I checked that question previously too – NictheDEV Feb 06 '22 at 13:02

0 Answers0