如果输入值中有内容，如何隐藏标签

Question

名字

#Start+ #DITBT {
  position: absolute;
  top:5px;
  right:1160px;
  left: 15px;-webkit-transform: translate3d(0px, 0px, 0px);
  opacity: 0.5;
  transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;  }
#Start:focus + #DITBT {
 opacity:0;
}

<div class="input-field"> 
  <input type="text" name="firstname" id="Start" maxlength="30" class="pad" required /> 
  <label for="Start" id="DITBT">First name</label>
</div> 

如果输入值中有内容，如何隐藏标签

Answer 1

$('input').on('input',function(){
   if($(this).val() != '') {
        $(this).parent().find('label').fadeOut();   
   } else {
       $(this).parent().find('label').fadeIn(); 
   }
});

http://jsfiddle.net/nwdrrnun/2/

Answer 2

input::placeholder {
  opacity: 0;
}

input:not(:placeholder-shown) ~ label {
  display: none;
}

<div class="input-field"> 
  <input type="text" placeholder="placeholder" name="firstname" id="Start" maxlength="30" class="pad" required /> 
  <label for="Start" id="DITBT">First name</label>
</div>