Chrome Autofill/Autocomplete no value for password

Question

When you have saved username and password for some site Chrome will autofill that username and password, but if you try to get the value for the password input field it is e

Answer 1

I have found a solution to this issue that works for my purposes at least.

I have a login form that I just want to hit enter on as soon as it loads but I was running into the password blank issue in Chrome.

The following seems to work, allowing the initial enter key to fail and retrying again once Chrome wakes up and provides the password value.

$(function(){

    // bind form submit loginOnSubmit
    $('#loginForm').submit(loginOnSubmit);

    // submit form when enter pressed on username or password inputs
    $('#username,#password').keydown(function(e) {
        if (e.keyCode == 13) {
            $('#loginForm').submit(e);
            return false;
        }
    });

});

function loginOnSubmit(e, passwordRetry) {

    // on submit check if password is blank, if so run this again in 100 milliseconds
    // passwordRetry flag prevents an infinite loop
    if(password.value == "" && passwordRetry != true)
    {
        setTimeout(function(){loginOnSubmit(e,true);},100);
        return false;
    }

    // login logic here
}

Answer 2

It's not a bug. It's a security issue. Imagine if one could just use javascript to retrieve autofilled passwords without the users' acknowledgment.

Answer 3

var txtInput = $(sTxt);
txtInput.focus();
txtInput.select();

This solution worked in my case. Using jQuery 3.1.1.

Answer 4

Continuing from what Andy Mercer said, here's my work around. Like a lot of people, I don't need the actual password value. I really just need to know that the password box has been autofilled, so that I can display the proper validation messages.

Personally, I would not use suggested solution to detect the background color change cause by Chrome's autofill. That approach seems brittle. It depends on that yellow color never changing. But that could be changed by an extension and be different in another Blink based browser (ie. Opera). Plus, there's no promise Google wont use a different color in the future. My method works regardless of style.

First, in CSS I set the content of the INPUT when the -webkit-autofil pseudo-class is applied to it:

input:-webkit-autofill {
  content: "\feff"
}

Then, I created a routine to check for the content to be set:

const autofillContent = `"${String.fromCharCode(0xFEFF)}"`;
function checkAutofill(input) {
    if (!input.value) {
        const style = window.getComputedStyle(input);
        if (style.content !== autofillContent)
            return false;
    }

    //the autofill was detected
    input.classList.add('valid'); //replace this. do want you want to the input
    return true;
}

Lastly, I polled the input to allow the autofill time to complete:

const input = document.querySelector("input[type=password]");

if (!checkAutofill(input)) {
    let interval = 0;
    const intervalId = setInterval(() => {
        if (checkAutofill(input) || interval++ >= 20)
            clearInterval(intervalId);
    }, 100);
}

Answer 5

I tried all the solutions and wasn't working for me so i came up with this. My problem is i have an input that move the placeholder top when it is filled, off course this is not working when Chrome autofill it. Only tested in Chrome :

 setTimeout(function () {
     var autofilled = document.querySelectorAll('input:-webkit-autofill');
         for (var i = 0; i < autofilled.length; i++) {
             Do something with your input autofilled
         }
 }, 200);

Answer 6

Just wrote an angular directive related to this. Ended up with the following code:

if ('password' == $attrs.type) {
      const _interval = $interval(() => { //interval required, chrome takes some time to autofill
          if ($element.is(':-webkit-autofill')) { //jQuery.is()
              //your code
              $interval.cancel(_interval);
          }
      }, 500, 10); //0.5s, 10 times
}

ps: it wont detect 100% of the times, chrome might take longer than 5 seconds to fill the input.