web-dev-qa-db-fra.com

Placeholder dans IE9

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 propriété Placeholder sur les balises input et textarea?

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

javascripthtmlhtml5internet-explorer-9placeholder
139
chriscatfr

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

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

Démo et exemples

http://mathiasbynens.be/demo/placeholder

p.s
J'ai utilisé ce plugin plusieurs fois et cela fonctionne à merveille. De plus, ne soumet pas le texte de substitution comme valeur lorsque vous soumettez votre formulaire (... une douleur que j'ai trouvée avec d'autres plugins).

184
Chris Jacob

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

Cette solution utilise la détection de caractéristiques (via modernizr ) pour déterminer si le paramètre fictif est pris en charge. Sinon, ajoute le support (via jQuery).

21
matt

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 exécuter placeHolder(HTMLInputElement), mais je suppose que vous pouvez simplement le modifier en conséquence! En outre, le fait de procéder de cette façon plutôt que de charger signifie que vous pouvez le faire fonctionner pour des entrées qui ne sont pas dans le DOM lors du chargement de la page.

Notez que cela fonctionne en appliquant la classe: usingPlaceHolder à l'élément d'entrée, afin que vous puissiez l'utiliser pour le styliser (par exemple, ajoutez la règle .usingPlaceHolder { color: #999; font-style: italic; } pour le rendre plus esthétique).

17
Mark Rhodes

Voici une bien meilleure solution. http://bavotasan.com/2011/html5-placeholder-jquery-fix/ Je l'ai un peu adopté pour fonctionner uniquement 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>
8
Stanislav Pisockij

Si vous voulez entrer 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: "/>
5
Erdem KAYA

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-->
2
decadenza

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

//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')); 
    })
}
2
Etienne Dupuis

pour le faire fonctionner dans IE-9, utilisez ci-dessous. ça marche 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;}
1
Suresh Gupta

Un peu tard pour la fête mais j'utilise mon JS éprouvé 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('');
        }
      })
    });

}
1
egr103

J'ai l'habitude de penser assez 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 ça a l'air 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();
    });
  }
});
0
cwd

J'ai cherché sur Internet et trouvé un code JQuery simple pour gérer ce problème. De mon côté, le problème a été résolu et travaillé, à savoir 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"));
                }
            });
        }
    });
0
Günay Gültekin