テキストボックスのタイトルとしてプレースホルダの値を使用するにはどうすればいいですか？

Question

ユーザーがテキストボックスをクリックしたときにタイトルとしてプレースホルダの値を使用したいと思います。 たとえば、Image Oneのプレースホルダ値は、ユーザがクリックするとプレースホルダの値が "Email or phone"になり、2番目の画像のImage Twoに示すように、このテキストボックスのタイトルになります。正しく理解していない場合は、gmail.com（新しい外観のサインイン）に移動して、プレースホルダの値が上になるテキストボックスをクリックし、外側をクリックするとその値がプレースホルダになります。私はその機能を正確に望んでいますが、私はそれをすることができません。 私を助けてください。

Answer 1

あなたは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; 
} 

チェックに長い時間が純粋を考え出すために、私が試したこのフィドルhttps://jsfiddle.net/60Lfj34s/

Answer 2

この

HTMLコード

<div> 
    <input type="text" class="inputText" /> 
    <span class="floating-label">Email or phone</span> 
</div> 

を確認することができますCSSの解決方法がありますが、実際にはという問題がありますあなたが使用することはできませんので、0の要素は、（例えば）、::before擬似要素になりません。

input:focus::before { 
content: attr(placeholder); 
} 

をだからここ代わりにjavascriptのソリューションです：

var myInput = document.getElementsByTagName('input')[0]; 
 
var myPlaceHolder = myInput.getAttribute('placeholder'); 
 

 
function addInputLabel() { 
 

 
if (document.getElementsByClassName('my-label').length < 1) { 
 
     var myLabel = document.createElement('div'); 
 
     myLabel.textContent = myPlaceHolder; 
 
     myLabel.classList.add('my-label'); 
 
     document.body.insertBefore(myLabel, myInput); 
 
    } 
 
} 
 

 
myInput.addEventListener('keypress', addInputLabel, false);

.my-label { 
 
height: 16px; 
 
line-height: 16px; 
 
font-size: 11px; 
 
color: rgb(255, 0, 0); 
 
}

<input placeholder="Placeholder Text" />