当我自动完成输入字段时，标签会覆盖值，并且加载时也不会获得长度

Posted 2023-02-24

【中文标题】当我自动完成输入字段时，标签会覆盖值，并且加载时也不会获得长度

【英文标题】：When I autocomplete input field, value is overrides by the label and not getting length on load as well

【发布时间】：2019-02-11 13:20:56

【问题描述】：

当我填写表格并保存然后刷新之后，我遇到了以下问题。

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

我检查了如下长度：

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>

【问题讨论】：

你的意思是autocomplete ?

是的！它的自动完成功能。

你能做一个小提琴吗？

自动完成总是有一些棘手的问题，我认为你需要做一些事情才能获得自动完成的价值，但我现在想不出它是什么

这里是 Codepen：codepen.io/tushar-kumawat/pen/wNjKeV

【参考方案1】：

终于知道答案了：

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

);
);