Detecting autofill of login form

Question

I am trying to create a webpage with a login page. When the user logs in for the first time the username and password will be saved by the browser, if he checks "Stay logged in". When he logs in the second time the browser will autofill the form and I can log him in without any need for him to interact with the page.

The problem is, that I can't get the password from the login form. Take a look at my code:

$(document).ready(setTimeout(function() {
  loginForm.form.submit(function(e) { // I don't have a onsubmit action defined on the login form
    console.log("Submit");
    checkLogin(); // This function should get the username and password value and makes a credential check but I cant get the password here
  });
  var username = $(".login-form__username").val();
  var password = $(".login-form__password").val(); // This always is "", an empty string!
  if (username) { // If the username is set we assume its an autofill
    console.log("autofilled");
    loginForm.form.submit(); // I manually fire the submit event when the browser autofills the username and password field
  }
}, 100));

I can clearly see, that the username and password are filled in to the form, but somehow I cant get the password. Everything goes well If I manually click on the submit button of the form. This will of course trigger checkLogin(); and I can get the password here. But it wont work, if I trigger the event manually after the document ready event.

Does anyone know how to fix this, or why this happens?

Thanks, David

EDIT

I just figured out, that this issue only appears on Chrome for Mac, it works like a charm on Chrome for Windows and on Firefox. This don't works on Safari, because you need to select the user you want to login.

In addition I also figured out, that the focus needs to be set to the Webpage itselfe, not on the URL-Bar or on the refreshButton

Answer 1

"Stay logged in" and the browsers Autofill are two pair of shoes. "Stay logged in" is normally implemented by a cookie or a local store which contains the current user information. A script running on your page checks that and logs the user in or sends him to the login form.

The autofill is a browser feature where the user is asked to store the credentials in the browser. You don't know via javascript if the is something stored. But you could try to check the length of the content of you input and blindly submit it. If it works the credentials were right.