HTML5-Platzhalterattribut (IE-kompatibel) Implementierung code

HTML5-Platzhalterattribut (IE-kompatibel) Implementierung code_jquery

WBOY

Freigeben： 2016-05-16 16:38:22

Original

985 Leute haben es durchsucht

HTML5 hat viele Verbesserungen an Web Form vorgenommen, wie z. B. neue Eingabetyptypen, Formularvalidierung usw.

Platzhalter ist ein weiteres Attribut, das HTML5 neu hinzugefügt wurde. Wenn dieses Attribut im Eingabe- oder Textbereich festgelegt ist, wird der Inhalt des Werts im Textfeld als graue Textaufforderung angezeigt verschwindet. In der Vergangenheit konnte dieser Effekt nur durch die Verwendung von JavaScript, Firefox, Google Chrome usw. erzielt werden, aber IE war der einzige, der sich inkonsistent anfühlte

Zum Beispiel:

Einführung eines leistungsstarken Attribut-Plug-Ins, das es dem IE ermöglicht, Platzhalter zu unterstützen. Es ist auch mit anderen Browsern kompatibel, die keine Platzhalter unterstützen. Der Code lautet wie folgt:

$(document).ready(function(){ 
 var doc=document,
 inputs=doc.getElementsByTagName('input'),
 supportPlaceholder='placeholder'in doc.createElement('input'),
 
 placeholder=function(input){
  var text=input.getAttribute('placeholder'),
  defaultValue=input.defaultValue;
  if(defaultValue==''){
  input.value=text
  }
  input.onfocus=function(){
  if(input.value===text)
  {
   this.value=''
  }
  };
  input.onblur=function(){
  if(input.value===''){
   this.value=text
  }
  }
 };
 
 if(!supportPlaceholder){
  for(var i=0,len=inputs.length;i<len;i++){
   var input=inputs[i],
   text=input.getAttribute('placeholder');
   if(input.type==='text'&&text){
    placeholder(input)
   }
  }
 }
 });

Nach dem Login kopieren

Kopieren Sie einfach den Code und speichern Sie ihn als Referenzdatei. Keine Bearbeitung erforderlich, super praktisch!

Beispiel: Dadurch zeigt die Eingabe des IE das Platzhalterattribut an, aber wenn es nur eine Eingabe auf der Seite gibt, ist es in Ordnung. Wenn es mehrere Eingaben gibt und die Eingabe keinen Wert ausfüllt, ist sie eine leere Eingabe Füllt den Platzhalterwert automatisch in value aus, was zu einem Fehler führt. Beispiel:

<input type="text" placeholder="输入商品编码" name="goodscode" id="goodscode" value="123" />
<input type="text" placeholder="输入商品名称" name="goodsname" id="goodsname" value="输入商品名称" />

Nach dem Login kopieren

Die Lösung besteht darin, im Hintergrund Ihr eigenes Urteil zu fällen. Vielleicht kann es in der obigen js-Datei gelöst werden, und wir werden es später untersuchen~!