टेक्स्टबॉक्स के लिए जावास्क्रिप्ट "वॉटरमार्क"

Question

मैं जानना चाहता हूं कि पेज लोड होने पर टेक्स्ट को टेक्स्टबॉक्स में कैसे रखा जाए। उदाहरण: यदि मेरे पास लॉगिन पृष्ठ है, तो मेरे पास "उपयोगकर्ता नाम" और "पासवर्ड" नामक 2 टेक्स्टबॉक्स होंगे। जब पृष्ठ लोड होता है तो मैं टेक्स्टबॉक्स को "उपयोगकर्ता नाम" के साथ लोड करना चाहता हूं, इसलिए मुझे उस के लिए एक लेबल नहीं रखना होगा। लेकिन जब उपयोगकर्ता टेक्स्टबॉक्स के अंदर क्लिक करता है तो उसे विच्छेदन करना चाहिए। मैं यह कैसे करु?

Answer 1

<input name="q" onfocus="if (this.value=='search') this.value = ''" type="text" value="search"> 

स्टैक ओवरफ़्लो खोज बॉक्स से

...।

---

तुम भी जाँच करने के लिए onblur घटना जोड़ सकते हैं: if (this.value=='') this.value = 'search'

यह होता वॉटरमार्क फिर से प्रिंट जब और पाठ बॉक्स के बाहर उपयोगकर्ता क्लिक फ़ील्ड रिक्त है।

Answer 2

ऐसा करने के तरीके पर बहुत सारे ट्यूटोरियल हैं। JQuery जावास्क्रिप्ट ढांचे का उपयोग कर Here's one walkthrough।

इसके बारे में another popular blog post इसके बारे में नियमित जावास्क्रिप्ट का उपयोग कर रहा है।

Answer 3

जे एस:

function clearDefault(ctl){ 
     if(ctl.value==ctl.defaultValue) { ctl.value = ""; } 
    } 

अपने पाठ बॉक्स में onfocus="clearDefault(this)" शामिल हैं और "उपयोगकर्ता नाम" या "पासवर्ड" करने के लिए अपने पाठ निर्धारित किया है।

Answer 4

इस लेख को देखें http://www.alistapart.com/articles/makingcompactformsmoreaccessible। बेशक, यदि आप jQuery का उपयोग कर रहे हैं, तो "लेबल ओवर" प्लगइन्स हैं।

Answer 5

laymen संदर्भ में:

• जब इनपुट पर ध्यान केंद्रित कर, अगर मूल्य है "उपयोगकर्ता नाम" तो यह करने के लिए सेट ""
• जब बॉक्स के फोकस को हटाने, यदि मान है "" (यानी कुछ भी नहीं दर्ज किया गया था), इसे रीसेट "उपयोगकर्ता नाम" अभी भी उपयोगकर्ता के लिए प्रतिक्रिया देने के लिए करने के लिए, क्योंकि वे अभी तक डेटा

कोड दर्ज नहीं किया है:

<input value="Username" onfocus="if(this.value=='Username') this.value = ''" onblur="if(this.value=='') this.value = 'Username'" type="text" /> 

Answer 6

एक और अधिक आधुनिक तरीका "प्लेसहोल्डर"

<input type="text" placeholder="search" />