प्लेसहोल्डर को फोकस पर और टाइप करते समय शीर्ष पर कैसे स्थानांतरित करें?

Question

मैं चाहता हूं कि प्लेसहोल्डर शीर्ष पर आगे बढ़े, जब टेक्स्टबॉक्स फोकस पर हो और उपयोगकर्ता टाइप कर रहे हों।

मुझे यकीन नहीं है कि यह सिर्फ HTML/css या कोई जावास्क्रिप्ट है या नहीं।

मेरे वर्तमान सीएसएस इस तरह दिखता है, और मैं अभी तक कोई 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; 
} 

यह लगभग काम करता है (कड़ी के रूप में के रूप में सही नहीं है), लेकिन प्लेसहोल्डर गायब हो जाता है जब मैं टाइप करना आरंभ करें । मैं ट्विटर-बूटस्ट्रैप का उपयोग कर रहा हूं, अगर इससे कुछ आसान हो जाता है!

धन्यवाद।

Answer 1

आप इसे इस

HTML की तरह कर सकता है:

<div> 
    <input type="text" class="inputText" /> 
    <span class="floating-label">Your email address</span> 
</div> 

सीएसएस:

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 यहाँ https://jsfiddle.net/273ntk5s/2/

Answer 2

वह साइट प्लेसहोल्डर को नहीं ले जा रही है, लेकिन इनपुट पर एक div (.floating-label) रखती है, इसलिए जब इनपुट केंद्रित होता है तो div सिर्फ इनपुट पर होने के लिए एनिमेट करता है। यहां का मुख्य भाग फ़्लोटिंग div में pointer-events: none; का उपयोग कर रहा है, इसलिए जब आप इसे क्लिक करते हैं तो ईवेंट इसके पीछे इनपुट बॉक्स में जाता है।

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>

@ से कोड संशोधित एक छोटे से user1846747।