I have a username and a password input on my page. At first, the div that wraps the username field has an orange border, and after the username is filled, it turns back to white, and then the div that wraps the password input is highlighted with the orange border. It works fine, but when those inputs are autofilled by the browser, the username border stays orange until the user interacts with the page.
We tried using javascript when the page loads to read the length of the value on the fields, but apparently the value doesn't detect autofill generated by the browser, the user would have to at least click on the page first (anywhere, even a right click) in order for this value to be updated. At last, we came to the conclusion that we could use javascript to style the elements we need by looking at the "placeholder" property of the element.
This is the code we use for clearing the borders
var userteste = document.getElementById('userInputContainer');
var passteste = document.getElementById('passwordInputContainer');
console.log(userteste.value);
// At this point, the log will be an empty value, even though there is
// a visible value filled in the input
if (userteste.value.length > 6 && passteste.value.length > 6) {
$("." + 'userInputContainer').css({ border: "1px solid #FFF" });
$("." + 'passwordInputContainer').css({ border: "1px solid #FFF" });
var img = document.getElementById('userIcon');
img.src = "/Content/Images/Ui/Login/LoginUserEscuro.svg";
var img = document.getElementById('passwordIcon');
img.src = "/Content/Images/Ui/Login/LoginLockEscuro.svg";
$('.btn-login').removeAttr('disabled', 'disabled');
}
Considering that at the same time, the placeholder is not shown, but the "value" of the input is empty, how could we use javascript to detect the placeholder visibility for an element, independent from it's value?
Possible Answer: Detecting browser Autofill
This one says that browsers doesn't really trigger an event when they autofill an input, after I realized that, I decided to try to look at the possibility of a solution with the input placeholder, if possible.
