So verschieben Sie die Beschriftung des Eingabetextfeldes, wenn der Benutzer auf das Eingabefeld klickt - angularjs

Question

Ich habe einen Eingabetyp = "Text" -Feld. Zu Beginn sollte das Feld den Feldnamen enthalten. Wenn der Benutzer auf dieses Eingabefeld klickt, sollte der Feldname nach oben verschoben werden und Platz lassen, um den Wert einzugeben.

Ich suchte in Google, aber ich konnte keine Lösung zu meinem Bedarf gefunden.

Es wird toll sein, wenn mir jemand helfen könnte.

Initally form looks like

After clicking on field

Answer 1

Das, was Sie können durch die Implementierung von Materialdesign erreicht werden soll. Verwenden Sie diese Option: https://codepen.io/sevilayha/pen/IdGKH

* { box-sizing:border-box; } 
 

 
/* basic stylings ------------------------------------------ */ 
 
body \t \t \t \t { background:url(http://scotch.io/wp-content/uploads/2014/07/61.jpg); } 
 
.container \t \t { 
 
    font-family:'Roboto'; 
 
    width:600px; 
 
    margin:30px auto 0; 
 
    display:block; 
 
    background:#FFF; 
 
    padding:10px 50px 50px; 
 
} 
 
h2 \t \t { 
 
    text-align:center; 
 
    margin-bottom:50px; 
 
} 
 
h2 small { 
 
    font-weight:normal; 
 
    color:#888; 
 
    display:block; 
 
} 
 
.footer \t { text-align:center; } 
 
.footer a { color:#53B2C8; } 
 

 
/* form starting stylings ------------------------------- */ 
 
.group \t \t \t { 
 
    position:relative; 
 
    margin-bottom:45px; 
 
} 
 
input \t \t \t \t { 
 
    font-size:18px; 
 
    padding:10px 10px 10px 5px; 
 
    display:block; 
 
    width:300px; 
 
    border:none; 
 
    border-bottom:1px solid #757575; 
 
} 
 
input:focus \t \t { outline:none; } 
 

 
/* LABEL ======================================= */ 
 
label \t \t \t \t { 
 
    color:#999; 
 
    font-size:18px; 
 
    font-weight:normal; 
 
    position:absolute; 
 
    pointer-events:none; 
 
    left:5px; 
 
    top:10px; 
 
    transition:0.2s ease all; 
 
    -moz-transition:0.2s ease all; 
 
    -webkit-transition:0.2s ease all; 
 
} 
 

 
/* active state */ 
 
input:focus ~ label, input:valid ~ label \t \t { 
 
    top:-20px; 
 
    font-size:14px; 
 
    color:#5264AE; 
 
} 
 

 
/* BOTTOM BARS ================================= */ 
 
.bar \t { position:relative; display:block; width:300px; } 
 
.bar:before, .bar:after \t { 
 
    content:''; 
 
    height:2px; 
 
    width:0; 
 
    bottom:1px; 
 
    position:absolute; 
 
    background:#5264AE; 
 
    transition:0.2s ease all; 
 
    -moz-transition:0.2s ease all; 
 
    -webkit-transition:0.2s ease all; 
 
} 
 
.bar:before { 
 
    left:50%; 
 
} 
 
.bar:after { 
 
    right:50%; 
 
} 
 

 
/* active state */ 
 
input:focus ~ .bar:before, input:focus ~ .bar:after { 
 
    width:50%; 
 
} 
 

 
/* HIGHLIGHTER ================================== */ 
 
.highlight { 
 
    position:absolute; 
 
    height:60%; 
 
    width:100px; 
 
    top:25%; 
 
    left:0; 
 
    pointer-events:none; 
 
    opacity:0.5; 
 
} 
 

 
/* active state */ 
 
input:focus ~ .highlight { 
 
    -webkit-animation:inputHighlighter 0.3s ease; 
 
    -moz-animation:inputHighlighter 0.3s ease; 
 
    animation:inputHighlighter 0.3s ease; 
 
} 
 

 
/* ANIMATIONS ================ */ 
 
@-webkit-keyframes inputHighlighter { 
 
\t from { background:#5264AE; } 
 
    to \t { width:0; background:transparent; } 
 
} 
 
@-moz-keyframes inputHighlighter { 
 
\t from { background:#5264AE; } 
 
    to \t { width:0; background:transparent; } 
 
} 
 
@keyframes inputHighlighter { 
 
\t from { background:#5264AE; } 
 
    to \t { width:0; background:transparent; } 
 
}

<div class="container"> 
 
    
 
    <h2>Google Material Design in CSS3<small>Inputs</small></h2> 
 
    
 
    <form> 
 
    
 
    <div class="group">  
 
     <input type="text" required> 
 
     <span class="highlight"></span> 
 
     <span class="bar"></span> 
 
     <label>Name</label> 
 
    </div> 
 
     
 
    <div class="group">  
 
     <input type="text" required> 
 
     <span class="highlight"></span> 
 
     <span class="bar"></span> 
 
     <label>Email</label> 
 
    </div> 
 
    
 
    </form> 
 
     
 
    <p class="footer"> 
 
    a <a href="http://scotch.io/tutorials/css/google-material-design-input-boxes-in-css3" target="_blank">tutorial</a> by <a href="http://scotch.io" target="_blank">scotch.io</a> 
 
    </p> 
 
    
 
</div>

Answer 2

Nutzung der Materialien Design und Sie md-input-container

<md-input-container class="md-block"> 
    <label>Username</label> 
    <input type="text"> 
</md-input-container> 

Material design input