javascript - 当我自动完成输入字段时，值被标签覆盖并且在加载时也没有获得长度

Question

当我填写表格并保存然后刷新时，出现以下问题。

当我自动保存输入字段时，值被标签覆盖并且在加载时也没有获得长度。我已经尝试过并在谷歌上进行了很多搜索，但没有找到合适的解决方案。我是结构体，请帮忙!

我检查的长度如下:

if ( $('#LoginEmail').val().length > 0){
    $(this).siblings('.placeholder').addClass('active');
    } else{
      $(this).siblings('.placeholder').removeClass('active');
    }

// Material Input
$('.form-control input').blur();
$('.placeholder').click(function() {
  $(this).siblings('input').focus();
});
$('.form-control').focus(function() {
  $(this).siblings('.placeholder').removeClass('active').addClass('active');
});   

// on blur
$('.form-control input').blur(function() {
  if ( $(this).val().length > 0){
    $(this).siblings('.placeholder').addClass('active');
    } else{
      $(this).siblings('.placeholder').removeClass('active');
    }
});

// Length Check
if ( $('#LoginEmail').val().length > 0){
    $(this).siblings('.placeholder').addClass('active');
    } else{
      $(this).siblings('.placeholder').removeClass('active');
    }

.inputField input, .inputField select {
    width: 100%;
    height: 35px;
    padding: 10px 23px;
    border: 1px solid #c5c5c5;
    font-size: 15px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    background: #fff!important;
}
.inputField {
    margin: 10px 0 0;
}
.inputField input, .inputField select {
    width: 100%;
    height: 55px;
    padding: 10px 23px;
    border: 1px solid #c5c5c5;
    font-size: 15px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    background: #fff !important;
}
.inputField textarea {
    width: 100%;
    height: 120px;
    padding: 10px 23px;
    border: 1px solid #c5c5c5;
    font-size: 15px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    background: #fff !important;
}
.inputField select .star {
    color: #f00;
}
.inputField.half {
    width: 49.5%;
    float: left;
    margin: 10px 1% 0px 0;
}
.inputField.half: nth-of-type(even) {
    margin-right: 0;
    float: left;
}
.inputField {
    width: 100%;
    position: relative;
    height: auto;
    display: inline-block;
    padding: initial;
    border: 0;
    box-shadow: none;
}
.placeholder {
    position: absolute;
    top: 17px;
    left: 23px;
    transition: all 0.3s ease;
}
.inputField.form-control select {
    color: #777;
}
.inputField select {
    color: #777;
}
.inputField .placeholder.active {
    top: -11px;
    background: #fff;
    padding: 0 2px;
}
.inputField .placeholder {
    position: absolute;
    top: 30px;
    left: 23px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

<div class="inputField form-control">          
 <input type="email" class="form-control" id="LoginEmail" required> 
 <div class="placeholder">
   <label for="email">Email ID</label>
   <span class="star">*</span>
</div>         
</div>
<div class="inputField form-control">         
 <input type="Password" class="form-control" id="LoginPassword" required>  
 <div class="placeholder">
   <label for="Password">Password </label>
   <span class="star">*</span>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

Answer 1

终于得到答案了:

$(window).bind("load", function() { 
$.each($('.inputField.form-control input:-webkit-autofill'), function() {
    var autofilled = $(this);
        var inputblock = $(this).next()
    $(inputblock).addClass('active');

});
});