Wie wird der Platzhalterwert als Titel des Textfelds verwendet, wenn der Benutzer darauf klickt?

Question

Ich möchte den Platzhalterwert als Titel verwenden, wenn ein Benutzer auf das Textfeld klickt. Zum Beispiel in diesem Bild Image One der Platzhalterwert ist "E-Mail oder Telefon", wenn der Benutzer darauf klickt, wird es der Titel dieses Textfelds, wie hier im zweiten Bild gezeigt Image Two. Wenn Sie das nicht richtig verstanden haben, gehen Sie bitte zu gmail.com (New Look Of Sign In), wenn Sie auf das Textfeld klicken, wird der Platzhalterwert nach oben verschoben und wenn Sie nach draußen klicken, wird dieser Wert zum Platzhalter. Ich möchte genau diese Funktionalität, aber ich kann das nicht. Hilf mir.

Answer 1

Sie dies,

HTML-Code

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

CSS-Code

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

prüfen diese Geige https://jsfiddle.net/60Lfj34s/

Answer 2

ich für eine lange Zeit versucht, mit einem reinen aufzukommen CSS-Lösung dafür, aber es gibt ein echtes Problem in der <input> Element nicht nehmen ein ::before Pseudoelement, so kann man nicht (zum Beispiel) verwenden:

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

So, hier ist eine Javascript-Lösung statt:

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" />