对文本输入焦点解释标签出现

Question

基本上我需要做的是文本输入焦点解释栏（这个输入是什么）需要从文本输入底部出现（动画）。我很难搞清楚，有什么办法做到这一点在CSS或JavaScript，我很想听到你的家伙解释，上传我的乱码。 我看到了一些解决方案，但我的表单有很多标签和很多事情，所以它的超混淆，即时通讯也很新颖。 这里是我的代码：

<div class="form-row"> 
    <input type="text" name="firstname" id="nickas" class="input-text" placeholder="Enter your name:"> 
    <label for="nickas">User name:</label> 
    <label class="label-helper" for="nickas">this is bar that appears</label> 
    </div> 

Answer 1

一套为0的.label-helper的不透明度，然后简单地切换使用jQuery的focus和blur事件类的附加类：

$('input').on('focus', function() { 
 
    $(this).siblings('.label-helper').addClass('in'); 
 
}).on('blur', function() { 
 
    $(this).siblings('.label-helper').removeClass('in'); 
 
});

.label-helper { 
 
    opacity: 0; 
 
    -webkit-transition: opacity .2s ease; 
 
    -moz-transition: opacity .2s ease; 
 
      transition: opacity .2s ease; 
 
} 
 

 
.label-helper.in { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-row"> 
 
    <input type="text" name="firstname" id="nickas" class="input-text" placeholder="Enter your name:"> 
 
    <label for="nickas">User name:</label> 
 
    <label class="label-helper" for="nickas">this is bar that appears</label> 
 
</div>

Answer 2

下面是一个仅用于CSS的示例。它利用:focus属性以及+或兄弟操作符来提供活动状态。

.form-row{ 
 
    position:relative; 
 
} 
 

 
label, input{ 
 
    padding: 5px; 
 
    border-radius:3px; 
 
    box-sizing: border-box; 
 
} 
 

 
.label-helper{ 
 
    display:block; 
 
    width: 100%; 
 
    background-color:black; 
 
    color: white; 
 
    position:absolute; 
 
    bottom:0; 
 
    opacity: 0; 
 
    z-index:1; 
 
    transition: all .5s ease; 
 
} 
 

 
input:focus + .label-helper{ 
 
bottom: -100%; 
 
opacity:1; 
 
}

<div class="form-row"> 
 
    <input type="text" name="firstname" id="nickas" class="input-text" placeholder="Enter your name:"> 
 
    <label class="label-helper" for="nickas">this is bar that appears</label> 
 
    <label for="nickas">User name:</label> 
 
    </div> 
 

 
<div class="form-row"> 
 
    <input type="text" name="firstname" id="nickas" class="input-text" placeholder="Enter your name:"> 
 
    <label class="label-helper" for="nickas">this is bar that appears</label> 
 
    <label for="nickas">User name:</label> 
 
    </div> 
 

 
<div class="form-row"> 
 
    <input type="text" name="firstname" id="nickas" class="input-text" placeholder="Enter your name:"> 
 
    <label class="label-helper" for="nickas">this is bar that appears</label> 
 
    <label for="nickas">User name:</label> 
 
    </div> 
 

 
<div class="form-row"> 
 
    <input type="text" name="firstname" id="nickas" class="input-text" placeholder="Enter your name:"> 
 
    <label class="label-helper" for="nickas">this is bar that appears</label> 
 
    <label for="nickas">User name:</label> 
 
    </div>

Answer 3

我做了这个给你，我希望这是你需要的东西：JsFiddle

.form-row { 
    height:45px; 
    position:relative; 
    z-index:100; 
} 
.form-row label:first-of-type { 
    height:30px; 
    line-height:30px; 
    display:block; 
} 
.input-text, 
.label-helper { 
    height:45px; 
    padding:0 30px; 
    line-height:45px; 
} 
.label-helper { 
    opacity:0; 
    position:absolute; 
    top:30px; 
    left:0; 
    z-index:101; 
    transition:0.5s; 
    pointer-events:none; 
} 

这是脚本：

$(document).ready(function(e) { 
    $('.input-text').focus(function(){ 
    $('.label-helper').css({ 
     "opacity":"1.0", 
     "top" : "75px" 
    }); 
    }); 
});