sefyudem / Responsive-Login-Form

418 stars 505 forks source link

check for autocomplete #10

Open atomkind opened 3 years ago

atomkind commented 3 years ago

Hey, nice job!

Just asked myself - what about autocomplete? If user saved the login-form-data in browser, re-visit the page and normaly, there is

//  ...
<h5>Username</h5>
<input type="text" class="input" autocomplete="username" required />
//  ...

And now the saved value will be shown on the same line as h5 because there is no class .focus.

So maybe the JS should first look on value.length while walking trough the input-elements?

inputs.forEach(input => {
    if(input.value.length > 0 ){
        let parent = this.parentNode.parentNode;
        parent.classList.add("focus");
    }
    input.addEventListener("focus", addcl);
    input.addEventListener("blur", remcl);
});

Well, this could be better to use the addcl() function but i dont know how to give this to it at this time :-P