كيفية اختبار ما إذا كان المتصفح يدعم سمة العنصر النائب الأصلي؟

Question

أحاول أن أكتب مكونًا إضافيًا لـ JQuery Plansholder لموقع لي ، لكن بالطبع أريد فقط إطلاق الوظيفة إذا لم تكن سمة العنصر النائب الأصلي مدعومًا ...

كيف يمكنني استخدام jQuery لاختبار الدعم الأصلي لسمة العنصر النائب؟

Answer 1

يمكنك إضافة إلى $.support بسهولة تامة من خلال إدخال هذا في الجزء العلوي من جافا سكريبت التي كتبتها:

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

يمكنك بعد ذلك استخدام أي منهما $.support.placeholder أو jQuery.support.placeholder في أي مكان في الكود الخاص بك.

NB هذا الرمز مقتبس من DiveIntoHtml5, ، الرابط المقدم من Hellvinz أعلاه.

Answer 2

استخدم مكتبة Modernizr ، والتي يمكنك العثور عليها هنا: http://www.modernizr.com/

ثم افعل هذا:

if (Modernizr.input.placeholder) {
  // your placeholder text should already be visible!
} else {
  // no placeholder support :(
  // fall back to a scripted solution
}

Modernizr مفيد حقًا لاختبار دعم المتصفح لجميع وظائف HTML5 تقريبًا.

Answer 3

أحب الحصول على مثل هذا الفصل البسيط ...

var Browser = {
  Can: {
    Placeholder: function () {
      return 'placeholder' in document.createElement('input'); 
    }
  }
}

... حتى تتمكن من التحقق من ما إذا كان المتصفح يدعم سمة العنصر النائب.

if (Browser.Can.Placeholder()) {

}

Answer 4

ال placeholder توجد خاصية على كائنات DOM الإدخال في جميع المتصفحات بغض النظر عما إذا كانت سمة العنصر النائب قد تم تعريفها على عنصر إدخال HTML أم لا.

الطريقة الصحيحة هي:

var Modernizr = {};
// Create the input element for various Web Forms feature tests.
var inputElem = document.createElement('input'), attrs = {};    
Modernizr.input = (function(props) {
    for(var i = 0, len = props.length; i < len; i++) {
        attrs[props[i]] = props[i] in inputElem;
    }
    return attrs;
})('autocomplete autofocus list placeholder max min multiple pattern required step'.split(' '));

if(!Modernizr.input.placeholder) {
    // Do something.
}