How can I get value of auto filled input when document is ready?

Question

I am building an style library for inputs that when document is ready it will check inputs value and it will move the label to down if inputs is empty. It works great when I add defult value to input, But It is not working currectly when input filled automaticaly with saved user and password by chrome. I tried to get value of it, But it returned empty. Then I checked This on firefox and it works great. Can you help me? This is my code:

JavaScript and JQuery :

$(document).ready(function () {

    setTimeout(() => {

        $(".login-form input").filter(function () {
            return $(this).val() == "" && $(document.activeElement).attr("name") != $(this).attr("name");
        }).prev().removeClass("label-top"); //by removing this class, label will move to down

    }, 100);

    // I addeed this settimeOut to make delay that if its too soon to get value.
    // I thought it might work but it didn't.

    $(".login-form input").focus(function (e) {
        $(this).prev().addClass("label-top");
    });

    $(".login-form input").blur(function (e) {
        if ($(this).val() == "") {
            $(this).prev().removeClass("label-top");
        }
    });

});

HTML :

<form class="login-form p-2">
<div class="login-card">
     <div class="login-card-right-section col-12 col-md-6 p-nik bg-light">

         <h4>Welcome</h4>

         <div class="form-group col-12">
         <label class="label-top"><span class="px-1">UserName</span></label>
              <input class="mb-1 col-12 nik-input" type="text">
         <i class="bi bi-person"></i>
         </div>
         <div class="form-group col-12">
              <label class="label-top"><span class="px-1">Password</span></label>
              <input class="mb-1 col-12 nik-input" type="password"  value="I AM ALREDY EXIST">
              <i class="bi bi-lock"></i>
         </div>

         <button class="nik-button col-12 mt-4">Confirm</button>

   </div>
   <div class="login-card-left-section col-6 d-none d-md-block">

    </div>
</div>
</form>

sorry I use some css and bootstrap, But I don't think it would be needed.

.label-top is the class that move <label></label> to top.

You could try a [css only solution](https://stackoverflow.com/questions/3617020/matching-an-empty-input-box-using-css), depending on your requirements. — Lain, Jul 26 '22 at 06:56
Have you checked that the Chrome auto fill actually triggers focus and blur events? Maybe you could use ```input.change()``` if that's the case. — Shrimp, Jul 26 '22 at 06:57
@Shrimp . I was tried `.change()`. But the `.Change()` will trigger when input focuses out. And I want it to trigger when browser fills it. — Saleh, Jul 26 '22 at 07:09
@Lain your Idea about only css solution was GREAT! Thankyou! — Saleh, Jul 26 '22 at 07:28

score 0 · Answer 1 · answered Jul 26 '22 at 06:57

You Can Use method Binding Like this :

$(document).on("focus",".login-form input",function (e) {
    $(this).prev().addClass("label-top");
});

$(document).on("blur",".login-form input",function (e) {
    if ($(this).val() == "") {
        $(this).prev().removeClass("label-top");
    }
});

I hope this code working for you.

How can I get value of auto filled input when document is ready?

1 Answers1