Comment tester si le navigateur prend en charge l'attribut de placeholder natif?

Question

Je suis en train d'essayer d'écrire un plugin jQuery de placeholder simple pour l'un de mes sites mais bien sûr je veux seulement déclencher la fonction si l'attribut de placeholder natif n'est pas pris en charge...

Comment puis-je utiliser jQuery pour tester la prise en charge native de l'attribut de placeholder ?

Answer 1

Vous pouvez ajouter à $.support assez facilement en insérant ceci en haut du Javascript que vous avez écrit :

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

Ensuite, vous pouvez utiliser soit $.support.placeholder ou jQuery.support.placeholder n'importe où dans votre code.

N.B. Ce code est adapté de diveintohtml5, le lien fourni par hellvinz ci-dessus.

Answer 2

Utilisez la bibliothèque Modernizr, que vous pouvez trouver ici : http://www.modernizr.com/

Et ensuite, faites ceci :

if (Modernizr.input.placeholder) {
  // votre texte d'espace réservé devrait déjà être visible !
} else {
  // pas de support pour l'espace réservé :(
  // revenir à une solution scriptée
}

Modernizr est vraiment pratique pour tester le support du navigateur pour presque toutes les fonctionnalités HTML5.

Answer 3

J'aime avoir une classe aussi simple ...

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

... pour que vous puissiez facilement vérifier si votre navigateur prend en charge l'attribut placeholder.

if (Browser.Can.Placeholder()) {

}

Answer 4

La propriété placeholder existe sur les objets DOM INPUT dans tous les navigateurs, que l'attribut placeholder ait été défini ou non sur l'élément HTML INPUT.

La manière correcte est :

var Modernizr = {};
// Crée l'élément input pour divers tests de fonctionnalités Web Forms.
var inputElem = document.createElement('input'), attrs = {};    
Modernizr.input = (function(props) {
    for(var i = 0, len = props.length; 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) {
    // Faire quelque chose.
}