web-dev-qa-db-fra.com

Un moyen simple de vérifier si l'espace réservé est pris en charge?

Je souhaite utiliser l'attribut HTML5"placeholder" dans mon code si le navigateur de l'utilisateur le prend en charge, sinon il suffit d'imprimer le nom du champ en haut du formulaire. Mais je veux seulement vérifier si le paramètre fictif est pris en charge et non la version/le nom du navigateur utilisé par l'utilisateur.

Donc, idéalement, j'aimerais faire quelque chose comme

    <body>

     <script>

           if (placeholderIsNotSupported) {
             <b>Username</b>;
           } 
      </script>
    <input type = "text" placeholder ="Username">
</body>

Sauf que je ne suis pas sûr du bit javascript. L'aide est appréciée!

javascripthtmlhtml5placeholder
52
algorithmicCoder
function placeholderIsSupported() {
    var test = document.createElement('input');
    return ('placeholder' in test);
}

J'ai utilisé une version jQuery-ized comme point de départ. (Donnant juste le crédit où il est dû.)

79
Trott

Ou juste:

if (document.createElement("input").placeholder == undefined) {
    // Placeholder is not supported
}
35
Nikita Gavrilov

Une autre façon de ne pas créer d’élément d’entrée en mémoire qui doit être sauvegardé:

if ('placeholder' in HTMLInputElement.prototype) {
    ...
}
7
probablyup

Si vous utilisez Modernizr, prenez rapidement les mesures suivantes:

if(!Modernizr.input.placeholder){
  ...
}
6
beenhero

http://html5tutorial.info/html5-placeholder.php a le code pour le faire.

Si vous utilisez déjà jQuery, vous n'avez pas vraiment besoin de le faire. Il existe des plug-ins à espace réservé disponibles ( http://plugins.jquery.com/plugin-tags/placeholder ) qui utiliseront l'attribut HTML5 si possible, et Javascript pour le simuler sinon.

3
mikel

J'essaie de faire la même chose ... ici j'ai écrit ceci

if(!('placeholder'in document.createElement("input"))){
   //... document.getElementById("element"). <-- rest of the code
}}

Avec cela, vous devriez avoir un identifiant pour identifier l’élément avec l’espace réservé .... Je ne sais pas si cela vous aidera également à identifier l’élément SEULEMENT lorsque l’espace réservé n’est pas pris en charge.

2
Andrea Tamago

Un peu tard pour la fête, mais si vous utilisez jQuery ou AngularJS, vous pouvez simplifier la méthode suggérée ci-dessus sans utiliser de plug-in.

jQuery

typeof $('<input>')[0].placeholder == 'string'

AngularJS

typeof angular.element('<input>')[0].placeholder == 'string'

Les contrôles sont très similaires, car AngularJS exécute jQlite sous le capot.

0
Boaz

Bonjour, c’est une vieille question, mais j'espère que cela aidera quelqu'un. 

Ce script vérifie la compatibilité des espaces réservés dans votre navigateur. S'il n'est pas compatible, tous les champs de saisie comportant un espace réservé utilisent plutôt le champ value = "". Notez que lorsque le formulaire est soumis, il sera également remplacé par "" si rien n'a été entré.

// Add support for placeholders in all browsers
var testInput = document.createElement('input');
testPlaceholderCompatibility = ('placeholder' in testInput);
if (testPlaceholderCompatibility === false)
{
   $('[placeholder]').load(function(){
        var input = $(this);
        if (input.val() == '')
        {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    });

    $('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur().parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        })
    });
}
0
Josh