Zwei Methoden zum Erzielen eines mit dem IE-Browser kompatiblen Platzhaltereffekts basierend auf jQuery_jquery

Platzhalter ist eines der Attribute von HTML5 Es hat leicht unterschiedliche Anzeigeeffekte in verschiedenen Browsern (moderne Browser, die HTML5 unterstützen):

In Chrome (v31.0.1650.63 m), Firefox (v21.0) und 360 Security (v6.3-Geschwindigkeitsmodus) verschwindet der Eingabeaufforderungstext nicht, nachdem das Eingabefeld den Fokus erhält, wie in der Abbildung gezeigt Figur (Chrom):

Bevor Sie sich konzentrieren:

Bei Konzentration:

IE11 muss etwas Besonderes leisten:

Bevor Sie sich konzentrieren:

Bei Fokussierung:

Das heißt, die Textaufforderung verschwindet, wenn sie den Fokus erhält.

Nicht moderne Browser (wie IE6-IE9) unterstützen das Platzhalterattribut nicht. Verwenden Sie nun jQuery, um auch diesen nicht modernen Browsern den Platzhalter-Anzeigeeffekt zu ermöglichen. Die erste Methode erzielt den Effekt von IE11, das heißt, der Eingabeaufforderungstext verschwindet, wenn Sie etwas wie Chrome erhalten möchten Der Effekt besteht darin, dass der Eingabeaufforderungstext nicht verschwindet, wenn das Eingabefeld den Fokus erhält. Sie können die zweite Methode verwenden.

Methode 1

Effektvorschau:

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

Die Idee besteht darin, zunächst festzustellen, ob der Browser das Platzhalterattribut unterstützt. Wenn nicht, durchlaufen Sie alle Eingabefelder, rufen Sie den Wert des Platzhalterattributs ab, geben Sie ihn als Eingabeaufforderung in das Eingabefeld ein und setzen Sie die Schriftart auf Grau .

Wenn das Eingabefeld den Fokus erhält und der Text im Eingabefeld mit den eingestellten Eingabeaufforderungsinformationen übereinstimmt, wird das Eingabefeld geleert

Wenn das Eingabefeld den Fokus verliert (Unschärfe) und der Text im Eingabefeld leer ist, geben Sie den erhaltenen Wert des Platzhalterattributs als Eingabeaufforderung in das Eingabefeld ein und stellen Sie die Schriftart auf Grau ein

Wenn im Eingabefeld eine Eingabe erfolgt (Keydown), wurden die Eingabeaufforderungsinformationen im Eingabefeld durch das Fokusereignis gelöscht. Zu diesem Zeitpunkt müssen Sie nur die Schriftart auf Schwarz zurücksetzen.

Der Nachteil dieser Methode besteht darin, dass sie nicht für das Eingabefeld geeignet ist, das beim Laden des DOM den Fokus erhält, da aus Sicht des Benutzers der Eingabeaufforderungstext des Eingabefelds den Fokus erhält, wenn die Seite geladen wird ist nicht sichtbar.

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));
      }
    });
  }

});

Nach dem Testen kann der Anzeigeeffekt eines IE11-Platzhalters erzielt werden.

Methode 2

Die Idee dieser Methode besteht darin, ein Bild mit Aufforderungstext als Hintergrundbild des Eingabefelds zu erstellen und zunächst den Fokus zu gewinnen und gleichzeitig das Hintergrundbild zu laden

Das Hintergrundbild sieht wie folgt aus:

Wenn das Eingabefeld nicht leer ist, entfernen Sie das Hintergrundbild;

Wenn das Eingabefeld leer ist, laden Sie das Hintergrundbild;

Wenn der Benutzer eine Taste auf der Tastatur drückt und das Eingabefeld nicht leer ist (Eingabezeichen), entfernen Sie das Hintergrundbild;

Wenn der Benutzer eine Taste auf der Tastatur drückt und das Eingabefeld leer ist (Zeichen löschen), laden Sie das Hintergrundbild.

Der Nachteil dieser Methode besteht darin, dass Sie für jede Eingabe ein Hintergrundbild mit unterschiedlichem Eingabeaufforderungstext erstellen und den Eingabestil festlegen müssen.

HTML-Code bleibt unverändert.

CSS:

JS:

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

$(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");
     });
   }
});

Diese Methode endet.

Diese Methode zeigt den Effekt unter IE8 von IETester an:

Bei Fokussierung:

Wenn der Fokus verloren geht:

Bei Eingabe:

Wenn jemand eine bessere Methode hat, können Sie diese gerne besprechen.