Espace réservé dans IE9

140

Il semble que ce soit un problème très connu, mais toutes les solutions que j'ai trouvées sur Google ne fonctionnent pas sur mon IE9 récemment téléchargé.

Quelle est votre méthode préférée pour activer la Placeholderpropriété sur les balises inputet textarea?

Facultatif: j'ai perdu beaucoup de temps là-dessus et je n'ai pas encore cherché la requiredpropriété. Auriez-vous également des conseils à ce sujet? Évidemment, je peux vérifier la valeur en PHP, mais pour aider l'utilisateur, cette propriété est très pratique.

chriscatfr
la source
Je suis de retour dans HTML après 4 ans. Cela signifie que je suis ouvert à tout conseil pour remplacer mes outils obsolètes. Je redémarre presque à partir de zéro. J'ai essayé principalement avec JQuery et de nombreux copier / coller des résultats de Google, mon dernier essai
chriscatfr

Réponses:

185

HTML5 Placeholder jQuery Plugin
- par Mathias Bynens (un collaborateur sur HTML5 Boilerplate et jsPerf )

https://github.com/mathiasbynens/jquery-placeholder

Démo et exemples

http://mathiasbynens.be/demo/placeholder

ps
J'ai utilisé ce plugin plusieurs fois et cela fonctionne un régal. De plus, il ne soumet pas le texte d'espace réservé comme valeur lorsque vous soumettez votre formulaire (... une vraie douleur que j'ai trouvée avec d'autres plugins).

Chris Jacob
la source
Nous travaillons avec un CRM personnalisé. J'ai ajouté ce code et les travaux comme prévu, mais ils soumettent leurs formulaires via javascript. Le bouton d'envoi a onclick="_IW.FormsRuntime.submit(this.form);". Puis-je changer cet événement onclick pour effacer d'abord les espaces réservés, puis exécuter ce code CRM qui existe dans le onclick?
Leeish
1
J'ai copié le fichier js github dans mon code src. Toujours pas aller avec l'espace réservé.
Philo
2
Cela fonctionne en effet un régal, mais c'est une douleur à utiliser sur les applications d'une seule page. Vous devez le déclencher manuellement pour les champs ajoutés dynamiquement. A part ça, ça marche très bien!
smets.kevin
1
Merci, plugin soigné, mais un problème que j'ai est avec ie9, l'espace réservé disparaît lorsque la saisie de texte est mise au point. Ceci est différent du comportement HTML5
gerrytan
1
Cela fonctionne bien avec un gros 'mais', $ ('input'). Val () renvoie la valeur de l'espace réservé lorsque l'entrée est vide. Parce que je travaille avec le framework AJAX, ces espaces réservés sont envoyés au serveur ...
Danubian Sailor
21

Je pense que c'est ce que vous recherchez: jquery-html5-placeholder-fix

Cette solution utilise la détection des fonctionnalités (via modernizr ) pour déterminer si l'espace réservé est pris en charge. Sinon, ajoute le support (via jQuery).

mat
la source
2
Cela fonctionne, mais ce n'est pas le meilleur code. En haut $(this)doit être affecté à une variable qui peut être utilisée dans tout le code. Appeler $pour chaque expression qui utilise $(this)est un non-non tout droit sorti de "Ne pas écrire jQuery Like This 101".
Sami Samhuri
20
Vous devez être prudent avec ce code car si vous soumettez le formulaire, la valeur d'espace réservé sera soumise en tant que valeur de formulaire. Devrait l'effacer avant qu'il ne soit soumis.
ericbae
2
@chriscatfr Veuillez envisager d'accepter ma réponse ( stackoverflow.com/a/13281620/114140 ) car j'estime qu'elle orientera les utilisateurs SO vers une bien meilleure solution.
Chris Jacob
Curieux depuis que je suis nouveau dans la bataille des fonctionnalités HTML 5: est-ce un modernisateur qui fait que c'est une mauvaise solution ou le jquery-html5-placeholder-fix lui-même (ou les deux)?
Snekse
Ceci est simple et élégant et a fait le travail pour moi.
graumanoz
17

Si vous voulez le faire sans utiliser jquery ou modenizer, vous pouvez utiliser le code ci-dessous:

(function(){

     "use strict";

     //shim for String's trim function..
     function trim(string){
         return string.trim ? string.trim() : string.replace(/^\s+|\s+$/g, "");
     }

     //returns whether the given element has the given class name..
     function hasClassName(element, className){ 
         //refactoring of Prototype's function..
         var elClassName = element.className;
         if(!elClassName)
             return false;
         var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");
         return regex.test(element.className);
     }

     function removeClassName(element, className){
         //refactoring of Prototype's function..
         var elClassName = element.className;
         if(!elClassName)
             return;
         element.className = elClassName.replace(
             new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' ');
     }

     function addClassName(element, className){
         var elClassName = element.className;
         if(elClassName)
             element.className += " " + className;
         else
             element.className = className;
     }

     //strings to make event attachment x-browser.. 
     var addEvent = document.addEventListener ?
            'addEventListener' : 'attachEvent';
     var eventPrefix = document.addEventListener ? '' : 'on';

     //the class which is added when the placeholder is being used..
     var placeHolderClassName = 'usingPlaceHolder';

     //allows the given textField to use it's placeholder attribute
     //as if it's functionality is supported natively..
     window.placeHolder = function(textField){

         //don't do anything if you get it for free..
         if('placeholder' in document.createElement('input'))
             return;

         //don't do anything if the place holder attribute is not
         //defined or is blank..
         var placeHolder = textField.getAttribute('placeholder');        
         if(!placeHolder)
             return;

         //if it's just the empty string do nothing..
         placeHolder = trim(placeHolder);
         if(placeHolder === '')
             return;

         //called on blur - sets the value to the place holder if it's empty..
         var onBlur = function(){
             if(textField.value !== '') //a space is a valid input..
                 return;
             textField.value = placeHolder;
             addClassName(textField, placeHolderClassName);
         };

         //the blur event..
         textField[addEvent](eventPrefix + 'blur', onBlur, false);

         //the focus event - removes the place holder if required..
         textField[addEvent](eventPrefix + 'focus', function(){
             if(hasClassName(textField, placeHolderClassName)){
                removeClassName(textField, placeHolderClassName);
                textField.value = "";
             }
         }, false);

         //the submit event on the form to which it's associated - if the
         //placeholder is attached set the value to be empty..
         var form = textField.form;
         if(form){
             form[addEvent](eventPrefix + 'submit', function(){
                 if(hasClassName(textField, placeHolderClassName))
                     textField.value = '';
            }, false);
         }

         onBlur(); //call the onBlur to set it initially..
    };

}());

Pour chaque champ de texte que vous souhaitez utiliser, vous devez l'exécuter placeHolder(HTMLInputElement), mais je suppose que vous pouvez simplement le modifier en conséquence! En outre, le faire de cette façon, plutôt que simplement sur le chargement signifie que vous pouvez le faire fonctionner pour les entrées qui ne sont pas dans le DOM lorsque la page se charge.

Notez que cela fonctionne en appliquant la classe: usingPlaceHolderà l'élément d'entrée, vous pouvez donc l'utiliser pour le styliser (par exemple, ajoutez la règle .usingPlaceHolder { color: #999; font-style: italic; }pour lui donner un meilleur aspect).

Mark Rhodes
la source
1
Désolé - je ne sais vraiment pas si c'est facile à faire - je suppose que vous voudriez afficher la valeur réelle du texte, plutôt que les "symboles". Le seul hack auquel je puisse penser pour faire cela serait de le changer pour une entrée de texte à moins qu'il n'ait le focus ou une valeur, sinon l'afficher comme un champ de mot de passe.
Mark Rhodes
@StephenPatten Jetez un œil à mon correctif pour les espaces réservés avec des champs de mot de passe. Je fais exactement ce que Mark a suggéré :)
Chev
8

Voici une bien meilleure solution. http://bavotasan.com/2011/html5-placeholder-jquery-fix/ Je l'ai un peu adopté pour ne fonctionner qu'avec les navigateurs sous IE10

<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie10 lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]><html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->

    <script>
    // Placeholder fix for IE
      $('.lt-ie10 [placeholder]').focus(function() {
        var i = $(this);
        if(i.val() == i.attr('placeholder')) {
          i.val('').removeClass('placeholder');
          if(i.hasClass('password')) {
            i.removeClass('password');
            this.type='password';
          }     
        }
      }).blur(function() {
        var i = $(this);  
        if(i.val() == '' || i.val() == i.attr('placeholder')) {
          if(this.type=='password') {
            i.addClass('password');
            this.type='text';
          }
          i.addClass('placeholder').val(i.attr('placeholder'));
        }
      }).blur().parents('form').submit(function() {
        //if($(this).validationEngine('validate')) { // If using validationEngine
          $(this).find('[placeholder]').each(function() {
            var i = $(this);
            if(i.val() == i.attr('placeholder'))
              i.val('');
              i.removeClass('placeholder');

          })
        //}
      });
    </script>
    ...
    </html>
Stanislav Pisockij
la source
ne fonctionne pas sur IE8 car IE n'autorise pas jQuery à manipuler les types d'entrée (consultez le commentaire de Bill le 20 décembre 2011 à 13h48 sur bavotasan.com/2011/html5-placeholder-jquery-fix )
forste
suppose également que vous soumettez un formulaire. La plupart des applications à page unique que j'ai vues n'utilisent pas de formulaires. cliquez simplement sur les gestionnaires.
chovy
5

Si vous souhaitez saisir une description, vous pouvez l'utiliser. Cela fonctionne sur IE 9 et tous les autres navigateurs.

<input type="text" onclick="if(this.value=='CVC2: '){this.value='';}" onblur="if(this.value==''){this.value='CVC2: ';}" value="CVC2: "/>
Erdem KAYA
la source
1
Je ne l'ai pas testé moi-même, mais deviner que cela ne fonctionne pas bien si vous accédez au champ au lieu de cliquer dessus. Je vois ce bogue dans de nombreux sites Web ou dans des sites similaires.
eselk
Avec cette solution, vous devez également vérifier cette valeur lors de l'envoi du formulaire.
Igor Jerosimić
Je suis surpris que cela ait obtenu des votes, cela ne devrait pas être utilisé même après sa publication en 2012/2013
LocalPCGuy
Si vous écrivez dans l'entrée quel devrait être l'espace réservé ('CV2:'), ce que vous avez tapé sera supprimé.
Daniel
2

En utilisant mordernizr pour détecter les navigateurs qui ne prennent pas en charge Placeholder, j'ai créé ce code court pour les corriger.

//If placeholder is not supported
if (!Modernizr.input.placeholder){ 

    //Loops on inputs and place the placeholder attribute
    //in the textbox.
    $("input[type=text]").each( function() { 
       $(this).val($(this).attr('placeholder')); 
    })
}
Etienne Dupuis
la source
2
Vous devez être prudent avec ce code car si vous soumettez le formulaire, la valeur d'espace réservé sera soumise en tant que valeur de formulaire. Vous devez l'effacer avant qu'il ne soit soumis.
chriscatfr
3
@chriscatfr: Comment ferait-on ça correctement dans cet exemple? Si mon espace réservé est «Mot de passe» et que mon mot de passe est en fait «Mot de passe»?
Lain
Vous pouvez utiliser le concept de «sale» pour des champs comme celui-ci. Marquez le champ comme propre à l'entrée (utilisez peut-être data-dirty = "false"). S'ils soumettent le formulaire sans modifier le texte de l'espace réservé, vous verrez que le champ est propre, alors effacez-le. S'ils l'ont changé, même à la même valeur que l'espace réservé, alors il est sale et vous soumettez cette valeur.
oooyaya
pour le mot de passe et une autre solution, veuillez consulter le jsfiddle.net/AlexanderPatel/1pv2174c/3
Shirish Patel
placeholderla propriété a été normalisée en tant que chaîne => pas besoin de Modernizr en fait ::::::::::::::::::::::::::::: if( typeof $('<input type="text">').get(0).placeholder == "undefined" ){ ... }est enaugh test pour non-support, testé dans l'émulation de mode IE9 - fonctionne.
jave.web
2

Je sais que je suis en retard mais j'ai trouvé une solution en insérant dans la tête le tag:

<meta http-equiv="X-UA-Compatible" content="IE=edge"/> <!--FIX jQuery INTERNET EXPLORER-->

décadenza
la source
Avez-vous testé cela dans IE9? Parce qu'autrement IE10 + prend en charge l'espace réservé ...
jave.web
Bien sûr, il est juste étrange que IE9 ne le prenne pas en charge lui-même qu'une balise l'activerait - était-ce une fonctionnalité expérimentale dans le passé? Est-ce référencé quelque part? :)
jave.web
1

pour le faire fonctionner dans IE-9, utilisez ci-dessous. cela fonctionne pour moi

JQuery doit inclure:

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

     if(!$.support.placeholder) {

       var active = document.activeElement;

       $(':text, textarea, :password').focus(function () {

       if (($(this).attr('placeholder')) && ($(this).attr('placeholder').length > 0) &&         ($(this).attr('placeholder') != '') && $(this).val() == $(this).attr('placeholder')) {
          $(this).val('').removeClass('hasPlaceholder');
        }
      }).blur(function () {
if (($(this).attr('placeholder')) && ($(this).attr('placeholder').length > 0) &&  ($(this).attr('placeholder') != '') && ($(this).val() == '' || $(this).val() ==   $(this).attr('placeholder'))) {
     $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});

$(':text, textarea, :password').blur();
$(active).focus();
$('form').submit(function () {
     $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
}
});

Le style CSS doit inclure:

.hasPlaceholder {color: #aaa;}
Suresh Gupta
la source
1
vous devriez corriger votre mise en forme ici, comme ajouter une indentation et séparer votre réponse de votre code
a darren
1

Un peu tard à la fête mais j'utilise mon JS éprouvé et de confiance qui tire parti de Modernizr . Peut être copié / collé et appliqué à n'importe quel projet. Fonctionne à chaque fois:

// Placeholder fallback
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('');
        }
      })
    });

}
egr103
la source
Toutes ces solutions utilisant jQuery .. n'y a-t-il pas de solution sans le jQuery gonflé?
Spock
0

Je pense généralement assez fortement à http://cdnjs.com/ et ils listent:

//cdnjs.cloudflare.com/ajax/libs/placeholder-shiv/0.2/placeholder-shiv.js

Je ne sais pas qui est le code mais cela semble simple:

document.observe('dom:loaded', function(){
  var _test = document.createElement('input');
  if( ! ('placeholder' in _test) ){
    //we are in the presence of a less-capable browser
    $$('*[placeholder]').each(function(elm){
      if($F(elm) == ''){
        var originalColor = elm.getStyle('color');
        var hint = elm.readAttribute('placeholder');
        elm.setStyle('color:gray').setValue(hint);
        elm.observe('focus',function(evt){
          if($F(this) == hint){
            this.clear().setStyle({color: originalColor});
          }
        });
        elm.observe('blur', function(evt){
          if($F(this) == ''){
            this.setValue(hint).setStyle('color:gray');
          }
        });
      }
    }).first().up('form').observe('submit', function(evt){
      evt.stop();
      this.select('*[placeholder]').each(function(elm){
        if($F(elm) == elm.readAttribute('placeholder')) elm.clear();
      });
      this.submit();
    });
  }
});
cwd
la source
1
Ce plugin nécessite également la bibliothèque prototype
rosswil
0

J'ai cherché sur Internet et j'ai trouvé un simple code jquery pour gérer ce problème. De mon côté, il a été résolu et travaillé sur ie 9.

$("input[placeholder]").each(function () {
        var $this = $(this);
        if($this.val() == ""){
            $this.val($this.attr("placeholder")).focus(function(){
                if($this.val() == $this.attr("placeholder")) {
                    $this.val("");
                }
            }).blur(function(){
                if($this.val() == "") {
                    $this.val($this.attr("placeholder"));
                }
            });
        }
    });
Günay Gültekin
la source
2
votre espace réservé devient la valeur. Si vous soumettez, ils seront envoyés. Avec l'espace réservé.js de la bonne réponse, les champs restent vides
chriscatfr