जब आप उस पर क्लिक करते हैं तो टेक्स्ट साफ़ हो जाता है

Question

मैं जानना चाहता हूं कि जब आप कोई प्रश्न पोस्ट करते हैं तो स्टैक ओवरफ़्लो जैसे कुछ को कैसे कार्यान्वित करना है: "कम से कम एक टैग (सीएसएस एचटीएमएल एएसपीनेट), अधिकतम 5 टैग।

मैं कैसे html में एक पाठ इनपुट, जहां यह आंशिक रूप से फीका है के लिए कुछ इस तरह लागू कर सकते हैं, लेकिन जब आप लिखते हैं, तो दिखाई नहीं देता है, और फीका नहीं है।

मुझे आपत्ति नहीं है कैसे जब तक यह काम करता है यह करने के लिए,।

धन्यवाद।

Answer 1

सबसे आसान विकल्प placeholder विशेषता का उपयोग करने के लिए है।

var inputs = document.getElementsByTagName('input'); 

for (i=0; i<inputs.length; i++){ 
    if (inputs[i].hasAttribute('data-hint')){ 
     inputs[i].value = inputs[i].getAttribute('data-hint'); 
      inputs[i].style.color = '#999'; 

     inputs[i].onclick = function(){ 
      this.value = ''; 
     }; 
     inputs[i].onblur = function(){ 
      if (this.value == '' || this.value == this.getAttribute('data-hint')){ 
       this.value = this.getAttribute('data-hint'); 
       this.style.color = '#000'; 
      } 
     }; 
    } 
} 

JS Fiddle demo:

पार अनुकूलता एक आवश्यकता है, तो जावास्क्रिप्ट भी एक विकल्प है।

या, jQuery के साथ:

$('input:text').each(
    function(){ 
     $(this).val($(this).attr('data-hint')); 
      $(this).css('color','#999'); 
    }).click(
    function(){ 
     $(this).val(''); 
      $(this).css('color','#000'); 
    }).blur(
    function(){ 
     if ($(this).val() == ''){ 
      $(this).val($(this).attr('data-hint')); 
      $(this).css('color','#999'); 
     } 
    }); 

JS Fiddle demo।

संदर्भ:

• Common Input Element Attributes (W3.org)।

वेनिला जावास्क्रिप्ट:

• document.getElementsByTagName()।
• element.onblur।
• element.onfocus।
• element.hasAttribute()।
• element.getAttribute()।
• element.style।

jQuery:

• text-input (:text) selector।
• .each()।
• .val()।
• .css()।
• .attr()।

Answer 2

<input type="text" name="booga" placeholder="This is default text" /> 

Answer 3

<input type="text" placeholder="Your text here" /> 

अद्यतित ब्राउज़र की आवश्यकता है, लेकिन किसी भी प्रकार के किसी भी कोड का उपयोग नहीं करता है।

<input type="text" placeholder="At least one tag, such as 'html', 'asp.net', max five tags." /> 

JS Fiddle demo:

Answer 4

<input type="text" placeholder="Default text goes here..."/> 

के रूप में @ Kolink का जवाब, बताते हैं ऐसा करने से एक अप-टू-डेट ब्राउज़र की आवश्यकता है, लेकिन सब पर कोड का उपयोग नहीं करता।