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

为.label-helper设置一个不透明度为0的其他类，然后只需使用jQuery的focus和blur个事件切换该类：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

这是一个仅限CSS的示例。它使用:focus属性以及+或兄弟运算符来提供活动状态。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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"
    });
  });
});

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

3 个答案: