對文本輸入焦點解釋標籤出現

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