入力中にプレースホルダをフォーカスの上に移動するにはどうすればよいですか？

Question

テキストボックスがフォーカスされているときと、ユーザーが入力しているときにプレースホルダを上部に移動したいとします。

これは単なるhtml/cssかjavascriptであるかわかりません。

私の現在のCSSは次のようになります、と私はまだJSコードがありません：それはほとんどの作業を行い

input:focus::-webkit-input-placeholder { 
    font-size: .75em; 
    position: relative; 
    top: -15px; 
    transition: 0.2s ease-out; 
} 

input::-webkit-input-placeholder { 
    transition: 0.2s ease-in; 
} 

input[type="text"]:focus, input[type="password"]:focus { 
    height: 50px; 
    padding-bottom: 0px; 
    transition: 0.2s ease-in; 
} 

input[type="text"], input[type="password"] { 
    height: 50px; 
    transition: 0.2s ease-in; 
} 

を（リンクのように完璧ではない）が、私は、タイピングを開始すると、プレースホルダが消えます。私はtwitter-bootstrapを使っています。何か簡単なことがあれば！

ありがとうございました。

Answer 1

あなたはこの

HTMLのようにそれを行うことができます：

<div> 
    <input type="text" class="inputText" /> 
    <span class="floating-label">Your email address</span> 
</div> 

CSS：

input:focus ~ .floating-label, 
input:not(:focus):valid ~ .floating-label{ 
    top: 8px; 
    bottom: 10px; 
    left: 20px; 
    font-size: 11px; 
    opacity: 1; 
} 

.inputText { 
    font-size: 14px; 
    width: 200px; 
    height: 35px; 
} 

.floating-label { 
    position: absolute; 
    pointer-events: none; 
    left: 20px; 
    top: 18px; 
    transition: 0.2s ease all; 
} 

ワーキングJSFiddleここhttps://jsfiddle.net/273ntk5s/2/

Answer 2

このサイトではプレースホルダは移動していませんが、入力にdiv（.floating-label）を配置しているので、入力がフォーカスされているときにdivが入力を超えてアニメーション化されます。ここでの重要な部分は、浮動divのpointer-events: none;を使用しているため、イベントをクリックすると、その後ろの入力ボックスにイベントが流れます。

Answer 3

少しuser1846747 @からのコードを修正

Answer 4

.user-input-wrp { 
 
\t position: relative; 
 
\t width: 50%; 
 
} 
 
.user-input-wrp .inputText{ 
 
\t width: 100%; 
 
\t outline: none; 
 
\t border:none; 
 
\t border-bottom: 1px solid #777; 
 
} 
 
.user-input-wrp .inputText:invalid { 
 
\t box-shadow: none !important; 
 
} 
 
.user-input-wrp .inputText:focus{ 
 
\t border-color: blue; 
 
\t border-width: medium medium 2px; 
 
} 
 
.user-input-wrp .floating-label { 
 
\t position: absolute; 
 
\t pointer-events: none; 
 
\t top: 18px; 
 
\t left: 10px; 
 
\t transition: 0.2s ease all; 
 
} 
 
.user-input-wrp input:focus ~ .floating-label, 
 
.user-input-wrp input:not(:focus):valid ~ .floating-label{ 
 
\t top: 0px; 
 
\t left: 10px; 
 
\t font-size: 13px; 
 
\t opacity: 1; 
 
}

<h1>The floating label</h1> 
 
<div class="user-input-wrp"> 
 
    <br/> 
 
    <input type="text" class="inputText" required/> 
 
    <span class="floating-label">Your email address</span> 
 
</div>

。