Deux méthodes pour obtenir un effet d'espace réservé compatible avec le navigateur IE basé sur jQuery_jquery

L'espace réservé est l'un des attributs de HTML5. Il aura des effets d'affichage légèrement différents selon les navigateurs (navigateurs modernes prenant en charge HTML5) :

Dans Chrome (v31.0.1650.63 m), Firefox (v21.0) et 360 Security (mode vitesse v6.3), une fois que le champ de saisie a pris le focus, le texte d'invite ne disparaît pas, comme indiqué dans le chiffre (Chrome):

Avant de vous concentrer :

Lorsque vous êtes concentré :

IE11 doit faire quelque chose de spécial :

Avant de vous concentrer :

Lorsque vous êtes concentré :

C'est-à-dire que l'invite de texte disparaîtra lorsqu'elle aura le focus.

Les navigateurs non modernes (tels que IE6-IE9) ne prennent pas en charge l'attribut placeholder. Utilisez maintenant jQuery pour permettre à ces navigateurs non modernes d'obtenir également l'effet d'affichage d'espace réservé. La première méthode obtient l'effet d'IE11, c'est-à-dire que le texte d'invite disparaît lorsque la zone de saisie devient active si vous souhaitez obtenir quelque chose comme Chrome ; L'effet est que le texte d'invite ne disparaît pas lorsque la zone de saisie obtient le focus. Vous pouvez utiliser la deuxième méthode.

Méthode 1

Aperçu de l'effet :

http://jsfiddle.net/L57b25yr/embedded/result/

L'idée est d'abord de déterminer si le navigateur prend en charge l'attribut d'espace réservé. Sinon, parcourez toutes les zones de saisie, obtenez la valeur de l'attribut d'espace réservé et remplissez-la dans la zone de saisie sous forme de message d'invite, puis définissez la police sur gris. .

Lorsque la zone de saisie obtient le focus et que le texte dans la zone de saisie est égal aux informations d'invite définies, la zone de saisie est effacée ;

Lorsque la zone de saisie perd le focus (flou) et que le texte dans la zone de saisie est vide, remplissez la valeur obtenue de l'attribut d'espace réservé dans la zone de saisie sous forme de message d'invite et définissez la police sur gris

;

Lorsqu'il y a une saisie dans la zone de saisie (keydown), les informations d'invite dans la zone de saisie ont été effacées par l'événement focus. À ce stade, il vous suffit de restaurer la police en noir.

L'inconvénient de cette méthode est qu'elle ne convient pas à la zone de saisie qui obtient le focus lorsque le DOM est chargé, car du point de vue de l'utilisateur, le texte d'invite de la zone de saisie qui obtient le focus lorsque la page est chargée n'est pas visible.

HTML :

<input type="text" id="uname" name="uname" placeholder="请输入用户名"/>

CSS :

.phcolor{ color:#999;}

JS :

$(function(){  

  //判断浏览器是否支持placeholder属性
  supportPlaceholder='placeholder'in document.createElement('input'),

  placeholder=function(input){

    var text = input.attr('placeholder'),
    defaultValue = input.defaultValue;

    if(!defaultValue){

      input.val(text).addClass("phcolor");
    }

    input.focus(function(){

      if(input.val() == text){
  
        $(this).val("");
      }
    });

 
    input.blur(function(){

      if(input.val() == ""){
      
        $(this).val(text).addClass("phcolor");
      }
    });

    //输入的字符不为灰色
    input.keydown(function(){
 
      $(this).removeClass("phcolor");
    });
  };

  //当浏览器不支持placeholder属性时，调用placeholder函数
  if(!supportPlaceholder){

    $('input').each(function(){

      text = $(this).attr("placeholder");

      if($(this).attr("type") == "text"){

        placeholder($(this));
      }
    });
  }

});

Après les tests, il peut obtenir l'effet d'affichage de l'espace réservé IE11.

Méthode 2

L'idée de cette méthode est de créer une image contenant un texte d'invite comme image d'arrière-plan de la zone de saisie, et d'abord d'obtenir le focus et de charger l'image d'arrière-plan en même temps

 ;

L'image d'arrière-plan est la suivante :

Lorsque la zone de saisie n'est pas vide, supprimez l'image d'arrière-plan

Lorsque la zone de saisie est vide, chargez l'image d'arrière-plan

Lorsque l'utilisateur appuie sur une touche du clavier et que la zone de saisie n'est pas vide (caractères de saisie), supprimez l'image de fond

Lorsque l'utilisateur appuie sur une touche du clavier et que la zone de saisie est vide (supprimer des caractères), chargez l'image d'arrière-plan.

L'inconvénient de cette méthode est que vous devez créer une image d'arrière-plan pour chaque entrée avec un texte d'invite différent et définir le style de saisie.

Le code HTML reste inchangé.

CSS :

.phbg{ background:url(img/bg.jpg) 0 0 no-repeat;}

JS :

$(function(){  

   //判断浏览器是否支持placeholder属性
   supportPlaceholder='placeholder' in document.createElement('input');

   if(!supportPlaceholder){

     //初始状态添加背景图片
     $("#uname").attr("class","phbg");
     //初始状态获得焦点
     $("#uname").focus;

     function destyle(){
     
      if($("#uname").val() != ""){
        
        $("#uname").removeClass("phbg");
      }else{
      
        $("#uname").attr("class","phbg");
       }
     }
     
     //当输入框为空时，添加背景图片；有值时去掉背景图片
     destyle();

     $("#uname").keyup(function(){

      //当输入框有按键输入同时输入框不为空时，去掉背景图片；有按键输入同时为空时（删除字符），添加背景图片
      destyle();
     });

     $("#uname").keydown(function(){
     
      //keydown事件可以在按键按下的第一时间去掉背景图片
      $("#uname").removeClass("phbg");
     });
   }
});

Cette méthode se termine.

Cette méthode affiche l'effet sous IE8 de IETester :

Lorsque vous êtes concentré :

Lorsque la concentration est perdue :

Lors de la saisie :

Si quelqu'un a une meilleure méthode, n'hésitez pas à en discuter.