मैं सामग्री के लिए समर्थन का पता कैसे लगा सकता हूं जावास्क्रिप्ट के माध्यम से संपादन योग्य?

Question

मैं अब और अब तक कुछ दिनों के लिए इस के लिए खोज कर रहा है, सबसे अच्छा मैं के साथ नीचे दी गई सूची जाँच कर रहा है ऊपर आ सकते हैं। मैं वास्तव में उपयोगकर्ता-एजेंट के आधार पर समर्थन की जांच करना पसंद नहीं करता, खासकर जब इसे धोखा दिया जा सकता है। मैंने कम से कम एक उदाहरण के बारे में भी सुना है जहां नीचे दी गई सूची गलत है (नीचे उल्लिखित)।

• इंटरनेट एक्सप्लोरर है?
• क्या वेबकिट है? (लेकिन मैं पढ़ा है कि मोबाइल सफारी इसका समर्थन नहीं करता)
• ओपेरा है?
• गीको और संस्करण> = 1.9 है? (जिसका अर्थ है Firefox 3 या बाद में)

वहाँ एक बेहतर तरीका जावास्क्रिप्ट के माध्यम से सीधे समर्थन के लिए परीक्षण पर आधारित है, या यह काफी समर्थन के लिए परीक्षण करने के लिए एक ही रास्ता है?

Answer 1

एक निश्चित सुविधा के लिए जाँच करने के लिए सबसे अच्छा तरीका है वास्तव में एक तत्व पर कि सुविधा के लिए परीक्षण कि आप जानते हैं कि इस तरह, यह समर्थन करना चाहिए करने के लिए है:

if(element.contentEditable != null) 
    // then it's supported 

या

if(typeof(element.contentEditable) != 'undefined') 
    // same thing.. but with typeof you can be more specific about the type of property you need to find 

Answer 2

var canEditContent= 'contentEditable' in document.body; 

Answer 3

मेरी परिदृश्य (जो आपके जैसा) के लिए सबसे अच्छा समाधान मैं के साथ आया था नीचे है। यह शायद बुलेटप्रूफ नहीं है, लेकिन स्थितियों के सबसे शामिल हैं:

var ua = navigator.userAgent; 
var android_version = ua.match(/Android ([0-9\.]+)/); 
var div = document.createElement("DIV"); 

if(typeof(div.contentEditable) == 'undefined' || 
    (/(iPhone|iPod|iPad)/i.test(ua) && /OS [1-4]_\d like Mac OS X/i.test(ua)) || 
    (android_version!=null && parseFloat(android_version[1])<3) || 
    (/(Opera Mobi)/i.test(ua)) 
) { 
    // doesn't support contenteditable 
} else { 
    // supports contenteditable 
} 

आप इसे this jsFiddle में बाहर का परीक्षण कर सकते हैं।

नोटिस: आपकी ज़रूरतों और उद्देश्य के आधार पर, आपको आईई संस्करण का पता लगाने की आवश्यकता हो सकती है, क्योंकि यह संतुष्ट करने का समर्थन है ... "आदर्श नहीं" :-) अधिकांश दर्द सुपर लाइब्रेरी रंगी द्वारा निपटाया जाता है। जे एस।

Answer 4

bobince के जवाब अधिकांश भाग के लिए काम करता है लेकिन, के रूप में कहा गया है, आप iOS और Android के संस्करणों है कि सॉफ्टवेयर कीबोर्ड को सामने लाने नहीं है बाहर करने के लिए सूँघने उपयोगकर्ता एजेंट की आवश्यकता होगी। मैं वर्तमान में इस तरह कुछ उपयोग कर रहा हूं:

function isContentEditable() { 
    var canEditContent = 'contentEditable' in document.body; 
    if (canEditContent) { 
     var webkit = navigator.userAgent.match(/(?:iPad|iPhone|Android).* AppleWebKit\/([^ ]+)/); 
     if (webkit && parseInt(webkit[1]) < 534) { 
      return false; 
     } 
    } 
    return canEditContent; 
} 

यह पुराने आईओएस और एंड्रॉइड डिवाइस को सही लौटने से रोकना चाहिए। हालांकि अभी भी एक समस्या है: भौतिक कीबोर्ड। यदि, उदाहरण के लिए, कोई डिवाइस एंड्रॉइड 2.3 चला रहा है लेकिन उसके पास एक भौतिक कीबोर्ड है तो उपयोगकर्ता सामग्री का उपयोग करने में सक्षम होगा। लेकिन यह फ़ंक्शन झूठी वापसी करेगा। हालांकि भौतिक कीबोर्ड काफी दुर्लभ हैं।

अधिकतर, कुछ उपकरणों पर उपयोगकर्ता मेनू बटन को दबाकर रखकर स्क्रीन पर कीबोर्ड लाने के लिए संभव हो सकता है। जाहिर है यह वास्तव में ऐसा कुछ नहीं है जिसे आपको अपने उपयोगकर्ताओं के बारे में जानना चाहिए।

उपयोगकर्ता को पहचान स्क्रिप्ट के स्नीफिंग हिस्से को मैन्युअल रूप से ओवरराइड करने के लिए कुछ तरीकों से आप इन मुद्दों को थोड़ा कम कर सकते हैं। आप इसे "अगर (canEditContent)" पर ओवरराइड चेक जोड़कर isContentEditable फ़ंक्शन में कार्यान्वित कर सकते हैं। हालांकि, इसके लिए यूआई लागू करने से अधिक चुनौती हो सकती है;)।