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

Working Answer as of July 8, 2016

Adam correctly stated this is a bug (or intended behavior). However, none of the previous answers actually say how to fix this, so here is a method to force Chrome to treat the autocompleted value as a real value.

Several things need to happen in order, and this needs to only run in Chrome and not Firefox, hence the if.

First we focus on the element. We then create a new TextEvent, and run initTextEvent, which adds in a custom string that we specify (I used "@@@@@") to the beginning of the value. This triggers Chrome to actually start acting like the value is real. We can then remove the custom string that we added, and then we unfocus.

---

Code:

input.focus();

var event = document.createEvent('TextEvent');

if ( event.initTextEvent ) {

    event.initTextEvent('textInput', true, true, window, '@@@@@');

    input.dispatchEvent(event);

    input.value = input.value.replace('@@@@@','');

}

input.blur();

---

Edit August 10, 2016

This only works right now in Chrome on Windows and Android. Doesn't work on OSX. Additionally, it will stop working at all in Sept 2016, according to:

https://www.chromestatus.com/features/5718803933560832

Also, I've opened a Chromium ticket.

https://bugs.chromium.org/p/chromium/issues/detail?id=636425

As of August 12, a member of the Chrome team said on the above ticket that the behavior won't be changing because they don't consider it a bug.

Long-term Work-Around Suggestion:

That said, the current behavior has been tweaked from when it was first implemented. The user no longer has to interact with the password input for the value to be reported. The user now just needs to interact (send a mouse or keyboard event) with any part of the page. That means that while running validation on pageload still won't work, clicking on a submit button WILL cause Chrome to correctly report the password value. The work-around then, is to revalidate all inputs that might be autocompleted, if that is what you are trying to do, on submit.

---

Edit December 13, 2016:

A new Chromium ticket has been opened and is being received better. If interested in changing this behavior of Chrome's, please star this new ticket:

https://bugs.chromium.org/p/chromium/issues/detail?id=669724

Answer 2

My solution comparing my css to the chrome autocomplete color...

$('input, select, textarea').each(function(){
    var inputValue = $(this).val();
    if ( inputValue != "" || $(this).css("background-color") != "rgba(255, 255, 255, 0)") {
        $(this).parents('.form-group').addClass('focused');
    }
});

Answer 3

Another option as of Dec. 16 / Chrome 54

I can't get the value of the password field, but, after "a short while", I can get the length of the password by selecting it, which is sufficient for me to enable the submit button.

setTimeout(function() {
  // get the password field
  var pwd = document.getElementById('pwd');
  pwd.focus();
  pwd.select();
  var noChars = pwd.selectionEnd;
  // move focus to username field for first-time visitors
  document.getElementById('username').focus()
  if (noChars > 0) {
    document.getElementById('loginBtn').disabled = false;
  }
}, 100);

Answer 4

Just set the autocomplete attribute to username for the username field and new-password for the password field;

<input type="text" id="username" autocomplete="username">
<input type="password" id="password" autocomplete="new-password" >

Answer 5

The workaround specified by Adam:

... detect the background color change that Chrome makes to fields that it has auto-filled. Chrome colors the background of auto-filled fields yellow, and this change is always visible to Javascript even when the value is not. Detecting this in Javascript lets us know that the field was auto-filled with a value, even though we see the value as blank in Javascript

I did like this:-

getComputedStyle(element).backgroundColor === "rgb(250, 255, 189)"

where rgb(250, 255, 189) is the yellow color Chrome applies to auto filled inputs.

Answer 6

Here's my solution to this issue:

$(document).ready(function(){
  if ( $("input:-webkit-autofill").length ){
    $(".error").text("Chrome autofill detected. Please click anywhere.");
  }
});

$(document).click(function(){
  $(".error").text("");
});

Basically, clicking makes the input visible to the user, so I ask the user to click and when they do, I hide the message.

Not the most elegant solution but probably the quickest.