Plug-in zur Unterstützung von Html5-Platzhalterattributen unter IE_html5-Tutorial-Kenntnissen

HTML5 hat viele Verbesserungen an Web Form vorgenommen, wie z. B. den neuen Eingabetyptyp, die Formularvalidierung usw.

Platzhalter ist ein weiteres neues Attribut, das in HTML5 hinzugefügt wurde. Wenn dieses Attribut im Eingabe- oder Textbereich festgelegt ist, wird der Inhalt des Werts im Textfeld als graue Textaufforderung angezeigt. Der Eingabeaufforderungstext 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:

Code kopierenDer 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;ivar input=inputs[i],
text=input.getAttribute('placeholder');
if(input.type==='text'&&text){
placeholder(input)
}
}
}
});


Kopieren Sie den Code direkt und speichern Sie ihn als Referenzdatei.

Beispiel: Dies macht die Eingabe des IE möglich Zeigt das Platzhalterattribut an, aber wenn es nur eine Eingabe auf der Seite gibt. Wenn es mehrere Eingaben gibt und die Eingabe keinen Wert ausfüllt, füllt die leere Eingabe glücklicherweise automatisch den Wert des Platzhalters aus, was zu einem Fehler führt . Zum Beispiel:

Code kopierenDer Code lautet wie folgt:

< input type="text" placeholder="Produktcode eingeben" name="goodscode" id="goodscode" value="123" />

Die Lösung besteht darin, im Hintergrund Ihr eigenes Urteil zu fällen. Vielleicht kann das Problem oben gelöst werden js-Datei, und wir werden sie später studieren~!