Jak przenieść element zastępczy do góry na fokus I podczas pisania?

Question

Chcę, aby symbol zastępczy przenosił się na górę, gdy pole tekstowe jest aktywne, a także podczas pisania.

Nie jestem pewien, czy to jest po prostu html/css lub dowolny javascript.

Mój obecny css wygląda tak, a nie mam jeszcze kod 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; 
} 

To prawie działa (nie jest tak doskonałe, jak link), ale zastępczy zniknie kiedy zacząć pisać . Używam twitter-bootstrap, jeśli to czyni cokolwiek prostszego!

Dzięki.

Answer 1

Można to zrobić następująco

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 robocza tutaj https://jsfiddle.net/273ntk5s/2/

Answer 2

Ta strona nie porusza symbolu zastępczego, ale umieszcza div (.floating-label) nad wejściem, więc gdy wejście jest skupione, div po prostu animuje się nad wejściem. Kluczową częścią tutaj jest użycie pointer-events: none; w pływającym elem div, więc po kliknięciu tego zdarzenie przechodzi przez niego do pola wejściowego za nim.

Answer 3

span{ 
 
    display:block; 
 
    } 
 
input:focus::-webkit-input-placeholder { color:transparent; } 
 
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */ 
 
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */ 
 
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script> 
 
$(document).ready(function() { 
 
    $('input').focus(function(){ 
 
    placeholder = $(this).attr('placeholder'); 
 
    if(placeholder != undefined){ 
 
     $(this).parent().prepend('<span class="input-placeholder">'+placeholder+'</span>'); 
 
    } 
 
    }); 
 
    $('input').blur(function(){ 
 
    $(this).parent().find('.input-placeholder').remove(); 
 
    }); 
 
}); 
 
</script> 
 
<div> 
 
    <input type="text" class="inputText" placeholder="Email adress" required/> 
 
</div>

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>

Zmodyfikowany kod z @ user1846747 trochę.