HTML5 प्लेसहोल्डर विशेषता में एक नज़र
HTML5 में मेरा पसंदीदा नया टुकड़ा जोड़ने की क्षमता है प्लेसहोल्डर पाठ आसानी से। प्लेसहोल्डर टेक्स्ट एक ग्रे टेक्स्ट है जो आपको एक इनपुट फील्ड में मिलता है, जो यूजर्स को उस फील्ड में इनपुट की उम्मीद करने के संकेत देने के लिए उपयोग किया जाता है। एक बार जब उपयोगकर्ता टाइप करना शुरू कर देंगे इनपुट फ़ील्ड, यह पाठ गायब हो जाएगा.
पुराने दिनों में, हम आमतौर पर ऐसा करते हैं जावास्क्रिप्ट के साथ, निम्नलिखित नुसार;
इस अभ्यास में कुछ भी गलत नहीं है, लेकिन यह HTML5 पर आसान है.
HTML5 ने तार्किक नाम के साथ एक नई विशेषता पेश की; प्लेसहोल्डर. यहाँ एक उदाहरण है:
यदि हम इसे ब्राउज़र पर देखते हैं, तो इनपुट को अब ग्रे टेक्स्ट होना चाहिए, जैसा कि नीचे देखा गया है;
कुछ चीजें जिन्हें नोट किया जाना चाहिए: विनिर्देश के अनुसार, प्लेसहोल्डर ए के विकल्प के रूप में विशेषता का उपयोग नहीं किया जाना चाहिए लेबल और यह भी सुझाव दिया जाता है कि इस विशेषता को ही लागू किया जाना चाहिए इनपुट ऐसे प्रकार जिन्हें पाठ की आवश्यकता होती है, उदा. टेक्स्ट, पारण शब्द, खोज, ईमेल, पाठ क्षेत्र तथा टेलीफोन.
जोड़ा जा रहा है प्लेसहोल्डर को इनपुट प्रकार: रेडियो तथा चेकबॉक्स कोई फर्क नहीं पड़ेगा.
प्लेसहोल्डर और सीएसएस
इसके अलावा, CSS के माध्यम से प्लेसहोल्डर टेक्स्ट को स्टाइल करना भी संभव है, लेकिन इस लेखन के समय अभी भी केवल फ़ायरफ़ॉक्स और वेबकिट ब्राउज़र तक ही सीमित है.
निम्न उदाहरण दिखाता है कि हम वेबकिट और फ़ायरफ़ॉक्स दोनों में प्लेसहोल्डर टेक्स्ट को हरे रंग में कैसे बदलते हैं;
इनपुट :: - वेबकिट-इनपुट-प्लेसहोल्डर color: green; इनपुट: -मोज़-प्लेसहोल्डर कलर: ग्रीन;
बस याद है, हालांकि :: - वेबकिट-इनपुट-प्लेसहोल्डर तथा : -Moz-प्लेसहोल्डर केवल पाठ को प्रभावित करेगा और समानांतर में नहीं लिखा जा सकता है.
इनपुट :: - वेबकिट-इनपुट-प्लेसहोल्डर, इनपुट: -मोज़-प्लेसहोल्डर कलर: ग्रीन;
कोड का यह टुकड़ा काम नहीं करेगा.
चयनकर्ता चुनें
CSS3 भी शुरू करके इस विशेषता का समर्थन करता है [प्लेसहोल्डर] विशेषता चयनकर्ता;
इनपुट [प्लेसहोल्डर] बॉर्डर: 1px ठोस हरा;
ऊपर दिए गए उदाहरण में, हम प्रत्येक का चयन करते हैं इनपुट वह है प्लेसहोल्डर विशेषता और सीमा को हरे रंग में बदलें.
ब्राउज़र संगतता
यह नया HTML5 सुविधा पुराने ब्राउज़रों में बिना किसी सहायता के है और वर्तमान में केवल पूरी तरह से समर्थित है: फ़ायरफ़ॉक्स 4+, क्रोम 4+, सफारी 5+, ओपेरा 11.6 तथा इंटरनेट एक्सप्लोरर 10 (जो अभी तक आधिकारिक तौर पर जारी नहीं किया गया है).
प्लेसहोल्डर पॉलिफ़िल्स
फिर भी, अगर हमें पुराने ब्राउज़रों में प्लेसहोल्डर को प्रदर्शित करने की आवश्यकता है, लेकिन फिर भी उपयोग करने में सक्षम हैं प्लेसहोल्डर विशेषता, हम Polyfills का उपयोग कर सकते हैं। वहां अत्यधिक हैं प्लेसहोल्डर पॉलिफ़िल्स वहाँ से बाहर है, लेकिन इस उदाहरण में हम PlaceMe.js का उपयोग करने जा रहे हैं;
PlaceMe.js, जैसा कि आप ऊपर दिए गए कोड स्निपेट से देख सकते हैं, jQuery पर निर्भर है। अब, यदि हम इसे देखते हैं, उदाहरण के लिए, इंटरनेट एक्सप्लोरर 9 सभी इनपुट को अब प्लेसहोल्डर टेक्स्ट प्रदर्शित करना चाहिए.
- डेमो देखें
- स्रोत डाउनलोड करें
फाइनल थॉट
HTML5 प्लेसहोल्डर विशेषता निश्चित रूप से प्लेसहोल्डर पाठ को जोड़ना आसान बनाती है। अब यह हमारे ऊपर है, वेब डेवलपर्स और डिज़ाइनर, किस विधि का उपयोग करना है: जावास्क्रिप्ट या एचटीएमएल 5.
यदि आप समझते हैं कि पुराने ब्राउज़रों का समर्थन करने के लिए Polyfills और jQuery का उपयोग करना बेमानी है, तो जावास्क्रिप्ट जाहिर तौर पर नौकरी के लिए अधिक अनुकूल है। लेकिन अगर आप पुराने ब्राउज़रों को शांति से अनदेखा कर सकते हैं तो HTML5 प्लेसहोल्डर का उपयोग करना शायद एक बेहतर तरीका है.
