CODEWITHSUNDEEP
javascriptjqueryhtmlcssnode.js
Tushar Kumawat
Tushar Kumawat

Reputation: 121

When I autocomplete input field, value is overrides by the label and not getting length on load as well

When I fill the form and save and then refresh after that I get below issue.

When I auto-save input field, value is overrides by the label and not getting length on load as well. I have tried and so many searches on google but I didn't find a suitable solution. I am struct, please help !

I have checked length as below:

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>

Upvotes: 4

Views: 796

Answers (1)

Tushar Kumawat
Tushar Kumawat

Reputation: 121

Finally got it the answer:

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

});
});

Upvotes: 4

Related Questions