HTML/CSS इनपुट/पाठ क्षेत्र, डिफ़ॉल्ट पाठ, और रंग

Question

दो अर्द्ध प्रश्न:

1) मैं <input> और <textarea> बक्से कि "खोज शब्द यहाँ दर्ज करें" की तरह, कुछ डिफ़ॉल्ट पाठ शामिल देखा है, और जिस पल पर आप बॉक्स पर क्लिक करते हैं, पाठ गायब हो जाता है। यह कैसे लागू किया जाता है? क्या यह जावास्क्रिप्ट चीज है?

2) क्या डिफ़ॉल्ट पाठ एक रंग में हो सकता है, और जो भी आप टाइप करते हैं (या तो ओवरराइटिंग या संलग्न), एक अलग रंग में हो?

Answer 1

सुनिश्चित नहीं हैं कि क्यों ऊपर चिह्नित है का उपयोग कर वॉटरमार्क पाठ को नियंत्रित कर सकते है। उम्मीद है कि यह करता है:

HTML4

<label for="name">Name</label>  
<input type="text" name="name" value="Enter your full name" onfocus="if(this.value=='Enter your full name') {this.value='', this.style.color='#999'};" onblur="if(this.value=='') {this.value='Enter your full name', this.style.color='#555';}" /> 

इसे तोड़ने के नीचे की सुविधा देता है:

value="Enter your full name"

यह अपने इनपुट में पाठ का एक डिफ़ॉल्ट स्ट्रिंग कहते हैं।

<textarea>Enter your comment</textarea> 

टैग के बीच अपना टेक्स्ट दर्ज करके टेक्स्टटेरा के साथ भी इसे हासिल किया जा सकता है।

onfocus="if(this.value=='Enter your full name') {this.value='', this.style.color='#999'};" 

इनपुट ध्यान केंद्रित प्राप्त करता है (यानी। क्लिक किया जाए या करने के बारे में टैब किए गए है) हम जाँच अगर वर्तमान इनपुट पाठ हमारे डिफ़ॉल्ट पाठ स्ट्रिंग "अपना पूरा नाम दर्ज करें" के बराबर है। यदि यह है कि हम इसे एक खाली स्ट्रिंग के रूप में सेट करते हैं और फ़ॉन्ट रंग बदलते हैं।

onblur="if(this.value=='') {this.value='Enter your full name', this.style.color='#555';} 

जब इनपुट फोकस खो देता है तो हम जांचते हैं कि वर्तमान इनपुट टेक्स्ट खाली है या नहीं। यदि यह है कि हम वापस अपनी डिफ़ॉल्ट पाठ स्ट्रिंग में बदल जाते हैं और रंग को मूल स्थिति में बदल देते हैं।

::-webkit-input-placeholder { color:#555; } /* Webkit */ 
:-moz-placeholder { color:#555; } /* Firefox <= 18 */ 
::-moz-placeholder { color:#555; } /* Firefox >= 19 */ 
:-ms-input-placeholder { color: #555; } /* Internet Explorer */ 

EXAMPLE

:

एचटीएमएल 5

<input type="text" name="name" placeholder="Enter your full name"> 
<textarea placeholder="Enter your comment"></textarea> 

एचटीएमएल 5 एक अंतर्निहित 'प्लेसहोल्डर' इस जो निम्नलिखित तरीके से स्टाइल किया जा सकता करने के लिए विशेषता है

Answer 2

1. उन्हें इनपुट वॉटरमार्क कहा जाता है। ऐसा करने के लिए आप बहुत सारे jQuery प्लगइन पा सकते हैं। यह one of them

2. आप के रूप में जवाब है, क्योंकि यह वास्तव में इस सवाल का जवाब नहीं है सीएसएस