web-dev-qa-db-fra.com

Comment tester si le navigateur prend en charge l'attribut d'espace réservé natif?

J'essaie d'écrire un plugin jQuery d'espace réservé simple pour un de mes sites, mais bien sûr, je ne veux déclencher la fonction que si l'attribut d'espace réservé natif n'est pas pris en charge ...

Comment puis-je utiliser jQuery pour tester la prise en charge native de l'attribut d'espace réservé?

jqueryhtmltestingplaceholder
47
Jannis

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;
})();

Vous pouvez ensuite utiliser soit $.support.placeholder ou jQuery.support.placeholder n'importe où dans votre code.

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

93
lonesomeday

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

Et puis faites ceci:

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

Modernizr est vraiment pratique pour tester la prise en charge du navigateur pour presque toutes les fonctionnalités HTML5.

15
Ender

J'aime avoir un cours aussi simple ...

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

... afin que vous puissiez facilement vérifier si votre navigateur prend en charge l'attribut d'espace réservé.

if (Browser.Can.Placeholder()) {

}
4
WoIIe

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

La bonne façon est:

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.
}
3
Aleksey Kolesnik