Input type=password value returning empty unless i use a breakpoint in the chrome console

Question

I'm trying to get the value of a password input box on window.onload however it keeps returning an empty string. If I set a break point and step through my code then it returns the correct string. And if i set a breakpoint anywhere before it and then just continue running the code it will also work. But running it without a break point somewhere stopping the code at some point or even using the longest setTimeout() doesnt seem to work.

A little background: im writing a solution to rid my design of the chrome autocomplete yellow background. I found a great solution that works but it removes the password value Solution Link . So i decided to first get the password value and then reset it once everything finishes. Heres my code:

 window.onload = function() { setTimeout(function() { var documentForms = document.forms; //First cycle through all the forms for (var i = 0; i < documentForms.length; i++) { var password = null; // Now find the password and store its value for (var k = 0; k < documentForms[i].elements.length; k++) { var passwordInput = documentForms[i].elements[k]; if (passwordInput.type == "password") { password = passwordInput.value; //This keeps returning "" } } // Now using this solution remove the autocomplete yellow: for (var j = 0; j < documentForms[i].elements.length; j++) { var input = documentForms[i].elements[j]; if (input.type == "text" || input.type == "password" || input.type == null) { var text = input.value; input.focus(); var event = document.createEvent('TextEvent'); event.initTextEvent('textInput', true, true, window, 'a'); input.dispatchEvent(event); input.value = text; input.blur(); } // Now that it has removed the password, if this is the password input, reset its value correctly if (input.type == "password") { input.value = password; input.blur(); } } } }, 300); }; 

 <form method="post" class="login"> <input type="text" class="input-text" name="username" id="username" value="" placeholder="Email Address" /> <input class="input-text" type="password" name="password" id="password" placeholder="Password" /> <input type="submit" class="button" name="login" value="Start" /> <a href="/forgot-password">Forgotten password?</a> </form> 

Answer 1

Chrome pretends it does not have a value for the field as a security measure. There's no way to hack around that.

You can change the styling as per answers to this question: Google Chrome form autofill and its yellow background

Answer 2

Try this:

var getPasswordValue = function getPasswordValue(inputEl){
    inputEl.type = "text";
    var value = inputEl.value;
    inputEl.type = "password";
    return value;
};