<इनपुट प्लेसहोल्डर = "लिखने के लिए क्लिक करें">

साइटों और पेशेवर विचारों से भी मेरे पागल रवैये के कारण, मैं फ़ायरफ़ॉक्स + नोस्क्रिप्ट का उपयोग करता हूं। जब मैं पहली बार कुछ साइटों पर जाता हूं, तो मैंने js को बंद कर दिया है और फ़ील्ड पर क्लिक कर रहा हूं, यह जानने के लिए कि शिलालेख "यहां खोजें" flaunt - मुझे एक bummer मिलता है। इस तथ्य के बावजूद कि मेरे पास एक आधुनिक ब्राउज़र है जो समस्याओं के बिना प्लेसहोल्डर विशेषता का समर्थन करता है। एक नियम के रूप में, हर जगह ऐसा आतंक है: <इनपुट मान = "साइट खोजें" onfocus = "if (this.value == 'साइट खोजें') this.value == ''" onblur = "if (यह .value = = '') this.value == 'साइट खोजें' '> (90 के दशक के उत्तरार्ध की गूंज)।

इस दुनिया के उन्नत इस मामले को <इनपुट> की सीमाओं से परे ले आए, लेकिन इसका सार नहीं बदलता है। और भी अधिक उन्नत, मूल्य से मूल्य को हटा दिया और इसे शीर्षक में रखा - यह बेहतर होगा। सौभाग्य से, मानकों को बनाने वाले लोगों ने इस व्यवसाय को देखा और इस उद्देश्य के लिए प्लेसहोल्डर विशेषता के साथ टैग को लैस करने का निर्णय लिया। ब्राउज़र डेवलपर्स ने तुरंत इस कार्यक्षमता को लागू किया, लेकिन फिर IE फिर से सड़क पर आ गया। मुझे लगता है कि यह याद दिलाने के लायक नहीं है कि दुनिया में कई कंप्यूटर हैं जहां 6-IE डिनो-डायनासोर स्थापित हैं, 7 का उल्लेख नहीं है, और इससे भी अधिक 8. मैं आपको यह भी याद दिलाता हूं कि एमएसआईई के लोग इस विशेषता को बहुत शानदार मानते थे और 9 वें में भी इसे शामिल नहीं किया था। संस्करण। इन सभी गलतफहमियों को दूर करने और पृष्ठ लेआउट के लिए अपने जीवन को आसान बनाने के लिए, मैंने एक छोटी स्क्रिप्ट तैयार की। जैसा कि आप बाद में देख सकते हैं, यह jquery पर आधारित है, लेकिन इसे दूसरे ढांचे पर रीमेक करने के लिए सरल जोड़तोड़ की मदद से हस्तक्षेप नहीं कर सकता है।

(function($) { /** * Ability for placeholder * usage: <input placeholder="any text"> */ $(function() { // if modernizr is available replace by var placeholder_support = Modernizr.input.placeholder; var placeholder_support = !!('placeholder' in document.createElement( 'input' )); if (!placeholder_support) { var inputs = $('input[placeholder]'), len = inputs.length, input, placeholder_class = 'placeholder'; while (len--) { inputs[len].value = inputs[len].value ? inputs[len].value : inputs.eq(len).addClass(placeholder_class).attr('placeholder'); inputs.eq(len).focus(function() { var th = $(this); if (this.value == th.attr('placeholder')) { th.removeClass(placeholder_class); this.value = ''; } }).blur(function() { var th = $(this); if (this.value == '') { th.addClass(placeholder_class); this.value = th.attr('placeholder'); } }); (function(input) { $(input.form).bind('submit', function() { if (input.value == $(input).attr('placeholder')) input.value = ''; }); }(inputs[len])); } } }); }(jQuery)); 

यह ध्यान देने योग्य है, शायद किसी ने ध्यान नहीं दिया कि सक्रिय प्लेसहोल्डर के साथ फ़ंक्शन एक प्लेसहोल्डर क्लास जोड़ता है, जिसका उपयोग -webkit-input-प्लेसहोल्डर, इनपुट :: - वेबकिट-इनपुट-प्लेसहोल्डर, इनपुट: -मोज़-प्लेसहोल्डर के साथ संयोजन में किया जा सकता है।

पुनश्च: मैं किसी भी तरह से इस समाधान के लिए अद्वितीय होने का दिखावा नहीं करता, यह सिर्फ कोड का एक टुकड़ा है जिसे मैं बॉयलरप्लेट श्रृंखला में लेआउट के लिए उपयोग करता हूं।

UPD: यहाँ पर तलाक देने वाले सभी हलिवारों में, केवल असली नोट rwz का था, उस मूल्य को इस तरह से सही ढंग से परिभाषित नहीं किया गया है। यह कथन उपरोक्त विधि की सार्वभौमिकता को नकारता है। इसलिए, मैंने इन कमियों से रहित एक और समाधान तैयार करने का निर्णय लिया।

 (function($) { $(function() { var placeholder_support = !!('placeholder' in document.createElement( 'input' )); if (!placeholder_support) { var body = $(document.body); $('input[placeholder]').each(function(){ var tpl = '<div class="placeholder" style="position:absolute;overflow:hidden;white-space:nowrap"/>', th = $(this), position = th.offset(), height = th.height(), width = th.width(), placeholder = $(tpl).appendTo(body) .css({ top: position.top, left: position.left, width: width, height: height, padding: ((th.innerHeight(true) - height) / 2) + 'px ' + ((th.innerWidth(true) - width) / 2) + 'px ' }) .text(th.attr('placeholder')) .addClass(th.attr('class')) ; placeholder.bind('click focus', function(){placeholder.hide();th.focus();}); th.bind('blur', function(){if (th.val() == '') placeholder.show()}); }); } }); }(jQuery)); 

इस विधि का उपयोग करते समय क्या विचार करें:

1. .होल्डर वर्ग को इसके इनपुट के समान आकार और लाइन-ऊंचाई निर्दिष्ट करने की आवश्यकता होती है। सभी इनपुट कक्षाओं को प्लेसहोल्डर डिव में कॉपी किया जाता है
2. जब पोजिशन के साथ कंटेनर में इनुपिंग हो तो गलत स्थिति: निश्चित। यदि आवश्यक हो, तो आसानी से तय किया गया।
3. खैर, और तदनुसार गति। हालांकि, सहनीय, पूरे पृष्ठ पर बिखरे 100 इनपुट पर फ़ायरफ़ॉक्स ने 177ms दिखाया (परीक्षण के लिए, विशेषता को डेटा प्लेसहोल्डर में बदल दिया गया था)।
4. छोटा कोड 597 बाइट्स लेता है - यदि आप चाहें तो आप इसे अभी भी कम कर सकते हैं

शायद अन्य कमियां या कमियां हैं, मैं ख़ुशी से आपकी टिप्पणियों को पढ़ूंगा और उचित परिवर्तन करूंगा।

PPS: यह लेख इस बारे में नहीं है कि js सक्षम है या नहीं। यह विशेष रूप से और संभवतः अन्य ब्राउज़रों के लिए MSIE के लिए एक बैसाखी है।