Form Rise-Eingabe und wiederhole den Text beim Füllen CSS

Question

Ich habe ein Formular, das derzeit gut funktioniert, nur was ich möchte es tun, wenn ich den Text fülle, sollte der Platzhalter auch zeigen, was auch immer ich in das Feld eingeben.

Sagen wir, wenn ich fülle Vorname: Bob Der Erbauer, der Platzhalter sollte auch das gleiche "Bob The Builder" anstelle von "Vorname" zeigen.

Unten ist der zugehörige Code hinzu:

Form-rise-click here for fiddle

HTML:

<div class="wrap"> 
    <div> 
    <label for="fname">First Name</label> 
    <input id="fname" type="text" class="cool"/> 
    </div> 

    <div> 
    <label for="lname">Last Name</label> 
    <input id="lname" type="text" class="cool"/> 
    </div> 

    <div> 
    <label for="email">Email</label> 
    <input id="email" type="text" class="cool"/> 
    </div> 
</div> 

CSS:

body { 
    font-family: 'Lato', sans-serif; 
    color: black; 
    background-color: white; 
} 
h1 { 
    font-size: 60px; 
    margin: 0px; 
    padding: 0px; 
} 
h3 { 
    margin: 0px; 
    padding: 0px; 
    color: #999; 
} 

div.wrap { 
    width: 500px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    vertical-align: middle; 
} 

div.wrap div { 
    position: relative; 
    margin: 50px 0; 
} 

label { 
    position: absolute; 
    top: 0; 
    font-size: 30px; 
    margin: 10px; 
    padding: 0 10px; 
    background-color: white; 
    -webkit-transition: top .2s ease-in-out, 
         font-size .2s ease-in-out; 
    transition: top .2s ease-in-out, 
       font-size .2s ease-in-out; 
} 

.active { 
    top: -25px; 
    font-size: 20px; 
} 

input[type=text] { 
    width: 100%; 
    padding: 20px; 
    border: 2px solid black; 
    font-size: 20px; 
    background-color: white; 
    color: black; 
} 

input[type=text]:focus { 
    outline: none; 
} 

jQuery:

$('input').on('focusin', function() { 
    $(this).parent().find('label').addClass('active'); 
}); 

$('input').on('focusout', function() { 
    if (!this.value) { 
    $(this).parent().find('label').removeClass('active'); 
    } 
}); 

Answer 1

Ich habe keyup() von jquery nur verwendet. Es ist im Grunde ein Event-Handler für die keyup Javascript-Ereignis.

$('input').keyup(function(){  
    $(this).parent().find('label').text($(this).val()) 
}); 

Bitte überprüfen Sie im JSFiddle für irgendwelche Zweifel.

Hier ist ein kleiner Vorschlag für eine bessere UX.

Wenn der Eingabewert leer ist, können Sie eine kleine if-Bedingung angeben, um den früheren Platzhalter anzuzeigen. Und wir können diesen Platzhalter mit Hilfe eines Attributs verwalten. für z. B. verwende ich Name, um den Platzhalter abzurufen.

Bitte überprüfen Sie die JSFiddle für irgendwelche Zweifel.

Hoffe, das ist hilfreich. Vielen Dank.

Answer 2

Ja, das ist möglich. Verwenden Sie den folgenden jQuery-Code als Beispiel für den Rest Ihrer Eingaben.

$("#fname").keyup(function() { 
    $("label[for='fname']").html($(this).val()); 
}); 

Beschreibung: Sie wählen die ID-Eingang (zB #fname), für die Sie den Wert des Labels ändern möchten, die (zB Label fname) auf den Wert nach oben bewegt, die Sie gerade sind tippen.

Überprüfen Sie die aktualisierte JSFiddle hier: https://jsfiddle.net/NikolaosG/tyowcgut/3/

Answer 3

Ja, das Keyup-Ereignis ist der beste Weg, damit umzugehen. Darüber hinaus verwenden Sie für jede Eingabe mehrere Ereignisbehandlungsroutinen. Dies ist eine alternative Methode zur Handhabung dieses Szenarios. Nicht dass man besser oder bevorzugt ist, sondern einfach eine Option.

$('input').on({ 
 
    focusin: function() { 
 
    $(this).parent().find('label').addClass('active'); 
 
    }, 
 
    focusout: function() { 
 
    if (!this.value) { 
 
     $(this).parent().find('label') 
 
     .removeClass('active'); 
 
    } 
 
    }, 
 
    keyup: function() { 
 
    var newText = $(this).val(); 
 
    $(this).parent().find('label').text(newText); 
 
    } 
 
});

body { 
 
    font-family: 'Lato', sans-serif; 
 
    color: black; 
 
    background-color: white; 
 
} 
 
h1 { 
 
    font-size: 60px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
h3 { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    color: #999; 
 
} 
 

 
div.wrap { 
 
    width: 500px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    vertical-align: middle; 
 
} 
 

 
div.wrap div { 
 
    position: relative; 
 
    margin: 50px 0; 
 
} 
 

 
label { 
 
    position: absolute; 
 
    top: 0; 
 
    font-size: 30px; 
 
    margin: 10px; 
 
    padding: 0 10px; 
 
    background-color: white; 
 
    -webkit-transition: top .2s ease-in-out, 
 
         font-size .2s ease-in-out; 
 
    transition: top .2s ease-in-out, 
 
       font-size .2s ease-in-out; 
 
} 
 

 
.active { 
 
    top: -25px; 
 
    font-size: 20px; 
 
} 
 

 
input[type=text] { 
 
    width: 100%; 
 
    padding: 20px; 
 
    border: 2px solid black; 
 
    font-size: 20px; 
 
    background-color: white; 
 
    color: black; 
 
} 
 

 
input[type=text]:focus { 
 
    outline: none; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<div class="wrap"> 
 
    <div> 
 
    <label for="fname">First Name</label> 
 
    <input id="fname" type="text" class="cool" /> 
 
    </div> 
 

 
    <div> 
 
    <label for="lname">Last Name</label> 
 
    <input id="lname" type="text" class="cool" /> 
 
    </div> 
 

 
    <div> 
 
    <label for="email">Email</label> 
 
    <input id="email" type="text" class="cool" /> 
 
    </div> 
 
</div>