एचटीएमएल 5 "प्लेसहोल्डर" समर्थन

Question

ब्राउज़र कैसे एचटीएमएल 5 प्लेसहोल्डर टैग का समर्थन करता है, तो मैं कैसे पता लगा सकता हूं, इसलिए मैं तय कर सकता हूं कि मेरे jQuery प्लेसहोल्डर प्लगइन को हुक करना है या नहीं।

Answer 1

var placeholderSupported = ('placeholder' in document.createElement('input')); 

चर placeholderSupportedtrue हो सकता है अगर यह मूल रूप से समर्थित है। अन्यथा, इसे false पर सेट किया जाएगा।

Answer 2

प्राप्त करने के लिए एक व्यापक विचार करने के लिए जाना:

http://caniuse.com/#search=placeholder

और ब्राउज़र में परीक्षण करने के लिए आप कर सकते हैं:

function supportsPlaceholder() { 
    var i = document.createElement('input'); 
    return 'placeholder' in i; 
} 

Answer 3

आप Modernizr और yepnope की तरह तीसरे पक्ष के पुस्तकालयों शामिल करना चाहते हैं .js, समर्थन के लिए परीक्षण करना और प्रगतिशील रूप से बढ़ाना वाकई आसान है, गहराई से गिरावट।

यह संसाधनों की बहुत सारी है कि मदद करनी चाहिए के साथ एक अच्छा लेख है: http://www.sitepoint.com/regressive-enhancement-with-modernizr-and-yepnope/

Answer 4

http://diveinto.html5doctor.com/everything.html#placeholder

return 'placeholder' in document.createElement('input'); 

हालांकि, अगर आप का उपयोग कर रहे jQuery प्लगइन पहले से ही देशी समर्थन के लिए जाँच की जा सकती है - आप हो सकता है को यह करने की आवश्यकता नहीं है।

Answer 5

मैं ऊपर जवाब से उधार लिया और इतना है कि यह बड़े आधुनिक ब्राउज़रों के साथ ही IE के साथ पीछे की ओर संगत है इसे बनाया -

नीचे कोड के साथ

, सुनिश्चित करें कि आप दोनों एक 'मान' और 'प्लेसहोल्डर बनाने 'इनपुट फ़ील्ड के लिए विशेषता सेट। मेरे विशेष मामले में मुझे आईई वेरिएंट का समर्थन करने की आवश्यकता थी।

स्पष्टीकरण - यदि ब्राउज़र प्लेसहोल्डर का समर्थन करता है तो इनपुट मान हटा दिया जाता है। यदि नहीं, तो पुराने ब्राउज़र प्लेसहोल्डर विशेषताओं को अनदेखा कर देंगे और नीचे जेएस डिफ़ॉल्ट प्लेसहोल्डर व्यवहार की नकल करता है। यह स्क्रिप्ट सीएसआरएफ के लिए किसी भी ऑथ टोकन को भी अनदेखा कर देगी (एक त्रुटि हो रही थी जहां मेरे फॉर्म ऐप्स में सीएसआरएफ चेतावनी के कारण मेरे फॉर्म में ऑथ टोकन मान साफ़ हो रहे थे)।

स्क्रिप्ट को सरल बनाने के लिए एक और तरीका यह है कि आप प्रत्येक स्क्रिप्ट को एक वर्ग असाइन करना चाहते हैं, जिसे आप विशेष रूप से इस स्क्रिप्ट का उपयोग करना चाहते हैं और तदनुसार सही कथन अपडेट करें (हालांकि नीचे विधि थोड़ा और सूखी है)।

var placeholderSupported = !!('placeholder' in document.createElement('input')); 

if (placeholderSupported === true){ 
    $('input:not([type="submit"], [name="authenticity_token"])').val(''); 
} else{ 
    $('input') 
     .focus(function() { 
      if (this.value === this.defaultValue) { 
       this.value = ''; 
      } 
     }) 
     .blur(function() { 
      if (this.value === '') { 
       this.value = this.defaultValue; 
      } 
    }); 
}