web-dev-qa-db-fra.com

Attribut d'espace réservé non pris en charge dans IE. Aucune suggestion?

Qu'est-ce que vous utilisez tous pour prendre en charge les attributs d'espace réservé dans les navigateurs?

Actuellement, j'utilise:

https://github.com/mathiasbynens/Placeholder-jQuery-Plugin

J'ai aussi essayé ce plugin en vain:

https://github.com/danbentley/placeholder

Mais cela ne semble pas fonctionner avec IE ... Plus précisément IE 8. Avez-vous d'autres suggestions/alternatives?

Devrais-je oublier l'attribut placeholder pour l'instant?

jqueryhtmlinternet-explorerhtml5
20
Christian Fazzini

Vous avez raison, IE8 ne prend pas en charge l'attribut placeholder. placeholder fait partie de la spécification HTML5, et IE8 a été publié longtemps avant que l'on ait pensé à HTML5.

La meilleure façon de le gérer de manière transparente consiste à utiliser un outil tel que Modernizr pour détecter si le navigateur prend en charge la fonctionnalité d’espace réservé et exécuter un script JS polyfill s’il n’est pas pris en charge.

if(!Modernizr.input.placeholder) {
    //insert placeholder polyfill script here.
}

Il existe de nombreux scripts polyfill fictifs à télécharger. Choisissez-en une qui utilise l'attribut placeholder pour que vous n'ayez besoin de définir la chaîne d'espace réservé à un seul endroit pour tous les navigateurs. En voici un que vous pouvez essayer: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

J'espère que cela pourra aider.

14
Spudley

Voici le code directement de mon projet qui fonctionne nativement en chrome et utilise le polyfill dans IE8 ... il y a une alerte ici pour les tests indiquant le moment où le polyfill est appelé. Vous avez besoin de modernizr chargé comme condition préalable à l’utilisation de ce code, mais un simple script à inclure dans votre section <head> suffira.

<script type="text/javascript">
    $('document').ready(function () {
        if (!Modernizr.input.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();

            $('[placeholder]').parents('form').submit(function() {
                $(this).find('[placeholder]').each(function() {
                    var input = $(this);
                    if (input.val() == input.attr('placeholder')) {
                        input.val('');
                    }
                })
            });

            alert("no place holders");
        }
    });
</script>
6
Dylan Hayes

Avec toutes les autres réponses et exemples que j'ai examinés, j'ai trouvé des problèmes. J'ai écrit ma propre solution pour résoudre ces problèmes et j'ai décidé de l'afficher ici. Les 2 choses que mon code gérera correctement et que les autres solutions semblent poser des problèmes sont:

  1. Si vous souhaitez réellement entrer le texte contenu dans l’espace réservé en tant que valeur, mon code ne supposera pas qu’il s’agit de l’espace réservé et ignore votre saisie.
  2. Si vous appuyez sur le bouton d'actualisation dans Internet Explorer, les champs contenant les valeurs d'espace réservé ne sont pas automatiquement remplis.

Incluez Modernizr et JQuery comme suit:

<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="modernizr-2.6.2.js"></script>

Ajouter des CSS tels que:

<style type="text/css" media="all">
.placeholder {
    color: #aaa;
}
</style>

Alors le code principal dont vous avez besoin est:

<script type="text/javascript">

$(document).ready(function() {

    // Only do anything if the browser does not support placeholders
    if (!Modernizr.input.placeholder) {

        // Format all elements with the placeholder attribute and insert it as a value
        $('[placeholder]').each(function() {
            if ($(this).val() == '') {
                $(this).val($(this).attr('placeholder'));
                $(this).addClass('placeholder');
            }
            $(this).focus(function() {
                if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {
                    $(this).val('');
                    $(this).removeClass('placeholder');
                }
            }).blur(function() {
                if($(this).val() == '') {
                    $(this).val($(this).attr('placeholder'));
                    $(this).addClass('placeholder');
                }
            });
        });

        // Clean up any placeholders if the form gets submitted
        $('[placeholder]').parents('form').submit(function() {
            $(this).find('[placeholder]').each(function() {
                if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {
                    $(this).val('');
                }
            });
        });

        // Clean up any placeholders if the page is refreshed
        window.onbeforeunload = function() {
            $('[placeholder]').each(function() {
                if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {
                    $(this).val('');
                }
            });
        };
    }
});

</script>
2
neelsg

Il existe de nombreux scripts polyfill pour l'attribut placeholder. Voici un qui semble bien fonctionner .

Rappelez-vous simplement d'appeler $('input, textarea').placeholder(); dans votre code JS, et éventuellement ajouter une règle CSS, par exemple. .placeholder { color: #aaa }.

2
tuomassalo

En fait, aucun des IE en date du 19 octobre 2011 ne supporte l'attribut placeholder. Je l'ai testé en 7, 8 et 9 et aucun d'entre eux ne semble le reconnaître. On pourrait penser que ie9, vu que la façon dont il est supposé supporter css3 et html5 aurait corrigé cela, mais cela ne semble pas être le cas.

Comme solution de contournement simple qui n'est pas jolie mais qui fait le travail, vous pouvez utiliser du javascript comme ceci:

<input type="text" value="Enter Zip"
  onfocus="if(this.value == 'Enter Zip'){this.value = '';}" />
1
weexpectedTHIS

C'est ce que j'ai utilisé dans l'un de mes projets. La seule chose à faire est que je n'avais besoin que d'un paramètre fictif sur un élément, ce qui pourrait ne pas fonctionner immédiatement. Mais juste pour avoir l’idée de la simplicité du code:

(function(){
    var nameInput = document.getElementById('your-id-here');
    var placeHolderSupport = ("placeholder" in document.createElement("input"));
    if( !placeHolderSupport )
    {
        //show hint in gray
        var placeholder = nameInput.getAttribute('placeholder');
        nameInput.onfocus = function(){ if(this.value==placeholder){this.value='';this.className='';} };
        nameInput.onblur  = function(){ if(this.value==''){this.value=placeholder;this.className='placeholder';} };
        nameInput.onblur();
    }
})()
0
Gerben