Comment prendre en charge l'attribut d'espace réservé dans IE8 et 9


132

J'ai un petit problème, l' placeholderattribut pour les zones de saisie n'est pas pris en charge dans IE 8-9.

Quelle est la meilleure façon de faire ce support dans mon projet (ASP Net). J'utilise jQuery. Dois-je utiliser d'autres outils externes pour cela?

Http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html est-il une bonne solution?


7
Le coin de Pedant: c'est un attribut, pas une balise. Une balise est entourée de crochets pointus (comme <input>); un attribut est une paire clé-valeur à l'intérieur des crochets pointus (comme placeholder="This is an attribute value"). Laisser la question telle quelle, afin que les futures personnes qui poseront la même question puissent la trouver.
Paul D.Waite

2
Ce lien ne fonctionnait pas tel quel. J'ai supprimé les guillemets supplémentaires autour du sélecteur $ ("[placeholder]") et c'était bien.
claptimes

1
La solution de ce lien ne gère pas non plus les boîtes de mot de passe selon le support natif dans le
kit Web

1
Le lien que vous avez donné fonctionne très bien - mis à part les mots de passe, cela fonctionne un régal et ne pourrait pas être plus simple à configurer
hobailey

1
le lien est une excellente solution
Pixelomo

Réponses:


89

Vous pouvez utiliser ce plugin jQuery: https://github.com/mathiasbynens/jquery-placeholder

Mais votre lien semble également être une bonne solution.


2
Le lien suggéré dans la question n'a pas fonctionné pour moi; il a eu des problèmes avec la soumission du formulaire. La solution que vous avez suggérée dans cette réponse semble beaucoup plus robuste et a fonctionné un régal.
Jonny White du

En fait, j'ai essayé celui-ci et cela fonctionne bien - mais dès que je charge une lightbox avec un formulaire et un champ de mot de passe, tout fonctionne mais pas le champ de mot de passe - il est juste vide.
Jurik du

6
dans mon espace réservé de mot de passe IE8 est en points
Mladen Janjetovic

Je ne peux pas non plus le voir dans ie8. Je l'ai contourné en affichant simplement du texte au-dessus des champs lorsque je suis dans ie8.
jhawes

jQuery-placeholder se comporte différemment. Il supprime l'espace réservé sur le focus au lieu du moment où l'utilisateur commence à taper quelque chose sur le champ comme le comportement normal dans Firefox pour les espaces réservés.
supertonsky

89

Vous pouvez utiliser l'un de ces polyfills:

Ces scripts ajouteront la prise en charge de l' placeholderattribut dans les navigateurs qui ne le prennent pas en charge, et ils ne nécessitent pas jQuery!


4
J'ai voté pour cela parce que j'aime l'idée d'une solution non-jquery, mais pour le moment, ce code a des problèmes dans IE8, donc il ne me convient pas. github.com/jamesallardice/Placeholders.js/issues/17
Dan Searle

3
Cette solution ne gère pas les boîtes de mot de passe
Jurik

2
@Jurik J'ai ajouté un polyfill supplémentaire - j'espère que cela aide.
starbeamrainbowlabs

1
Même le distributeur de ce plugin dit que ce plugin ne gère pas les champs de mot de passe dans <IE9 github.com/jamesallardice/Placeholders.js/issues/…
Jurik

Le champ du mot de passe ne fonctionne toujours pas dans iE8. Le lien de réponse accepté semble fonctionner dans ie8 pour le champ de mot de passe.
Susie

24

le $ .Browser.msie n'est plus sur le dernier JQuery ... vous devez utiliser le $ .support

comme ci-dessous:

 <script>

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


     //fix for IE7 and IE8
     $(function () {
         if (!$.support.placeholder) {
             $("[placeholder]").focus(function () {
                 if ($(this).val() == $(this).attr("placeholder")) $(this).val("");
             }).blur(function () {
                 if ($(this).val() == "") $(this).val($(this).attr("placeholder"));
             }).blur();

             $("[placeholder]").parents("form").submit(function () {
                 $(this).find('[placeholder]').each(function() {
                     if ($(this).val() == $(this).attr("placeholder")) {
                         $(this).val("");
                     }
                 });
             });
         }
     });
 </script>

2
cela fonctionne comme un charme, je l'aime mieux que d'ajouter des plugins, merci beaucoup
LemonCool

@vsync non si vous lisez bien, j'ai dit plugins, au pluriel, la plupart des options que j'ai trouvées doivent utiliser plusieurs fichiers, avec des tonnes de code, contre quelques lignes. n'êtes-vous pas un peu arrogant, et comment ce commentaire améliore-t-il la réponse
LemonCool

Cela ne devrait pas vraiment être utilisé. Ceci est destiné à l'usage interne de jQuery et peut être supprimé à tout moment.api.jquery.com/category/deprecated/deprecated-1.9
Sera le

3

si vous utilisez jquery, vous pouvez faire comme ceci. à partir de ce site Espace réservé avec Jquery

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

ce sont les liens alternatifs

  1. Bibliothèque jquery d'espace réservé
  2. Polyfills HTML5 - allez à la section espace réservé

3
Cette réponse fonctionne, mais vous devez suivre le lien pour la fonctionnalité complète. Le code ici seul ne fonctionnera pas.
Hawkee

1
ofc ça ne marchera pas, c'est un code ridicule! pourquoi liez-vous encore et encore la même «forme» pour l' submitévénement? qu'est-ce que l'événement de soumission a à voir avec quoi que ce soit
vsync

que se passera-t-il si je tape le même texte que dans le texte d'espace réservé dans IE8 ???
Bimal Das

3

J'ai eu des problèmes de compatibilité avec plusieurs plugins que j'ai essayés, cela me semble être le moyen le plus simple de prendre en charge les espaces réservés sur les entrées de texte:

function placeholders(){
    //On Focus
    $(":text").focus(function(){
        //Check to see if the user has modified the input, if not then remove the placeholder text
        if($(this).val() == $(this).attr("placeholder")){
            $(this).val("");
        }
    });

    //On Blur
    $(":text").blur(function(){
        //Check to see if the use has modified the input, if not then populate the placeholder back into the input
        if( $(this).val() == ""){
            $(this).val($(this).attr("placeholder"));
        }
    });
}

prend-il en charge IE9?
Viku

2
$(function(){    
    if($.browser.msie && $.browser.version <= 9){
        $("[placeholder]").focus(function(){
            if($(this).val()==$(this).attr("placeholder")) $(this).val("");
        }).blur(function(){
            if($(this).val()=="") $(this).val($(this).attr("placeholder"));
        }).blur();

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

essaye ça


1

J'utilise celui-ci, c'est seulement du Javascript.

J'ai simplement un élément d'entrée avec une valeur, et lorsque l'utilisateur clique sur l'élément d'entrée, il le change en un élément d'entrée sans valeur.

Vous pouvez facilement changer la couleur du texte en utilisant CSS. La couleur de l'espace réservé est la couleur de l'id #IEinput, et la couleur de votre texte tapé sera la couleur de l'id #email. N'utilisez pas getElementsByClassName, car les versions d'IE qui ne prennent pas en charge un espace réservé ne prennent pas non plus en charge getElementsByClassName!

Vous pouvez utiliser un espace réservé dans une entrée de mot de passe en définissant le type de l'entrée de mot de passe d'origine sur texte.

Tinker: http://tinker.io/4f7c5/1 - Les serveurs JSfiddle sont en panne!

*Désolé pour mon mauvais anglais

JAVASCRIPT

function removeValue() {
    document.getElementById('mailcontainer')
        .innerHTML = "<input id=\"email\" type=\"text\" name=\"mail\">";
    document.getElementById('email').focus(); }

HTML

<span id="mailcontainer">
    <input id="IEinput" onfocus="removeValue()" type="text" name="mail" value="mail">
</span>

3
L'espace réservé devrait revenir si le champ est vide et que le focus est perdu
Chris Pratt

1

Pour les autres qui débarquent ici. C'est ce qui a fonctionné pour moi:

//jquery polyfill for showing place holders in IE9
$('[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('');
        }
    })
});

Ajoutez simplement ceci dans votre fichier script.js. Gracieuseté de http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html


0

Puisque la plupart des solutions utilisent jQuery ou ne sont pas aussi satisfaisantes que je le souhaitais, j'ai écrit un extrait pour moi-même pour mootools.

function fix_placeholder(container){
    if(container == null) container = document.body;

    if(!('placeholder' in document.createElement('input'))){

        var inputs = container.getElements('input');
        Array.each(inputs, function(input){

            var type = input.get('type');

            if(type == 'text' || type == 'password'){

                var placeholder = input.get('placeholder');
                input.set('value', placeholder);
                input.addClass('__placeholder');

                if(!input.hasEvent('focus', placeholder_focus)){
                    input.addEvent('focus', placeholder_focus);
                }

                if(!input.hasEvent('blur', placeholder_blur)){
                    input.addEvent('blur', placeholder_blur);
                }

            }

        });

    }
}

function placeholder_focus(){

    var input = $(this);    

    if(input.get('class').contains('__placeholder') || input.get('value') == ''){
        input.removeClass('__placeholder');
        input.set('value', '');
    }

}

function placeholder_blur(){

    var input = $(this);    

    if(input.get('value') == ''){
        input.addClass('__placeholder');
        input.set('value', input.get('placeholder'));
    }

}

J'avoue que ça a l'air un peu PLUS que d'autres mais ça marche bien. __placeholder est une classe ccs pour rendre la couleur du texte d'espace réservé fantaisie.

J'ai utilisé le fix_placeholder dans window.addEvent ('domready', ... et pour tout code ajouté comme des popups.

J'espère que vous aimez.

Sincères amitiés.



0
<input type="text" name="Name" value="Name" onfocus="this.value = ''" onblur=" if(this.value = '') { value = 'Name'}" />

0

Ajoutez le code ci-dessous et ce sera fait.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="https://code.google.com/p/jquery-placeholder-js/source/browse/trunk/jquery.placeholder.1.3.min.js?r=6"></script>
    <script type="text/javascript">
        // Mock client code for testing purpose
        $(function(){
            // Client should be able to add another change event to the textfield
            $("input[name='input1']").blur(function(){ alert("Custom event triggered."); });    
            // Client should be able to set the field's styles, without affecting place holder
            $("textarea[name='input4']").css("color", "red");

            // Initialize placeholder
            $.Placeholder.init();

            // or try initialize with parameter
            //$.Placeholder.init({ color : 'rgb(255, 255, 0)' });

            // call this before form submit if you are submitting by JS
            //$.Placeholder.cleanBeforeSubmit();
        });
    </script>

Téléchargez le code complet et la démo sur https://code.google.com/p/jquery-placeholder-js/downloads/detail?name=jquery.placeholder.1.3.zip


0

Voici une fonction javascript qui créera des espaces réservés pour IE 8 et ci-dessous et qui fonctionne également pour les mots de passe:

/* Function to add placeholders to form elements on IE 8 and below */
function add_placeholders(fm) {	
	for (var e = 0; e < document.fm.elements.length; e++) {
		if (fm.elements[e].placeholder != undefined &&
		document.createElement("input").placeholder == undefined) { // IE 8 and below					
			fm.elements[e].style.background = "transparent";
			var el = document.createElement("span");
			el.innerHTML = fm.elements[e].placeholder;
			el.style.position = "absolute";
			el.style.padding = "2px;";
			el.style.zIndex = "-1";
			el.style.color = "#999999";
			fm.elements[e].parentNode.insertBefore(el, fm.elements[e]);
			fm.elements[e].onfocus = function() {
					this.style.background = "yellow";	
			}
			fm.elements[e].onblur = function() {
				if (this.value == "") this.style.background = "transparent";
				else this.style.background = "white";	
			}		
		} 
	}
}

add_placeholders(document.getElementById('fm'))
<form id="fm">
  <input type="text" name="email" placeholder="Email">
  <input type="password" name="password" placeholder="Password">
  <textarea name="description" placeholder="Description"></textarea>
</form>


-1
    <script>
        if ($.browser.msie) {
            $('input[placeholder]').each(function() {

                var input = $(this);

                $(input).val(input.attr('placeholder'));

                $(input).focus(function() {
                    if (input.val() == input.attr('placeholder')) {
                        input.val('');
                    }
                });

                $(input).blur(function() {
                    if (input.val() == '' || input.val() == input.attr('placeholder')) {
                        input.val(input.attr('placeholder'));
                    }
                });
            });
        }
        ;
    </script>

$ .browser.msie n'est plus pris en charge. Essayez plutôt d'utiliser la détection des fonctionnalités.
invot
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.