HTML DOM टेक्स्टएरिया placeholder प्रॉपर्टी: प्लेसहोल्डर टेक्स्ट सेट/प्राप्त करना

HTML DOM टेक्स्टएरिया placeholder प्रॉपर्टी टेक्स्ट एरिया एलिमेंट के placeholder एट्रिब्यूट का मान लौटाती और संशोधित करती है। प्लेसहोल्डर उपयोगकर्ता को अपेक्षित इनपुट फॉर्मेट/सामग्री का संकेत देता है।

सिंटैक्स

1. placeholder प्राप्त करना:

object.placeholder

2. placeholder सेट करना:

object.placeholder = "text"

उदाहरण: प्लेसहोल्डर दिखाना

<!DOCTYPE html>
<html>
<style>
  body { color: #000; background: lightseagreen; height: 100vh; }
  .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; }
  .show { margin: 1rem 0; font-size: 1.5rem; }
</style>
<body>
  <h1>DOM टेक्स्टएरिया placeholder प्रॉपर्टी डेमो</h1>
  <textarea placeholder="नमस्ते! मैं एक टेक्स्टएरिया एलिमेंट का प्लेसहोल्डर टेक्स्ट हूँ" rows="8" cols='20'></textarea>
  <button onclick="set()" class="btn">प्लेसहोल्डर दिखाएं</button>
  <div class="show"></div>
  <script>
    function set() {
      document.querySelector('.show').innerHTML = document.querySelector("textarea").placeholder;
    }
  </script>
</body>
</html>

आउटपुट

1. प्रारंभ में: प्लेसहोल्डर टेक्स्ट के साथ खाली टेक्स्टएरिया
2. "प्लेसहोल्डर दिखाएं" क्लिक: प्लेसहोल्डर टेक्स्ट नीचे प्रदर्शित होता है
3. टेक्स्टएरिया में टाइप करने पर: प्लेसहोल्डर गायब हो जाता है

प्लेसहोल्डर सर्वोत्तम अभ्यास

• लेबल का विकल्प नहीं: हमेशा <label> का उपयोग करें; प्लेसहोल्डर पूरक है
• उदाहरण दें: "अपना संदेश यहाँ लिखें..." के बजाय "अपना संदेश यहाँ लिखें (अधिकतम 500 वर्ण)"
• फॉर्मेट संकेत: दिनांक के लिए "DD/MM/YYYY", फोन के लिए "+91 XXXXX XXXXX"
• कम रखें: लंबे प्लेसहोल्डर्स UX खराब करते हैं
• कंट्रास्ट: सुनिश्चित करें कि प्लेसहोल्डर रंग पढ़ने योग्य है (CSS ::placeholder)

CSS से प्लेसहोल्डर स्टाइलिंग

::placeholder {
  color: #999;
  opacity: 1; /* Firefox फिक्स */
  font-style: italic;
}

::-webkit-input-placeholder { /* WebKit/Blink */ }
::-moz-placeholder { /* Firefox 19+ */ }
:-ms-input-placeholder { /* IE 10+ */ }

प्लेसहोल्डर vs value