のテキスト入力フォーカスの説明ラベルが表示されます

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イベント使用してクラスを切り替え、追加のクラスに設定します：

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