HTML5 hat viele Verbesserungen des Webformulars vorgenommen, z. Wenn die Eingabe oder TextArea dieses Attribut festlegt, wird der Inhalt dieses Wertes im Textfeld als Grauwort-Eingabeaufforderung angezeigt. Wenn das Textfeld den Fokus gewinnt, verschwindet der schnelle Text. Um diesen Effekt zu erzielen, wurde JavaScript verwendet, um ihn zu kontrollieren:
Da Platzhalter ein neues Attribut ist, unterstützen es derzeit nur wenige Browser. Wie kann ich feststellen, ob der Browser ihn unterstützt? (Weitere HTML5/CSS3 -Feature -Erkennung können zugegriffen werden)
Funktion hasplaceholdersupport () {
Return 'Placeholder' in document.createelement ('Eingabe');
}
Der Standard -Eingabeaufforderungstext ist grau und der Textstil kann durch CSS geändert werden:
/ * alle */::-Webkit-Input-Placeholder {color:#f00; } Eingabe: -moz-Placeholder {Farbe:#f00; } / * individual: webkit * /#field2 ::-webkit-input-placeholder {color:#00f; }#field3 ::-webkit-input-placeholder {color:#090; Hintergrund: LightGreen; Texttransformierung: Großbuchstaben; }#field4 ::-webkit-input-placeholder {font-style: italic; Textdekoration: Überaus; Buchstabenabteilung: 3px; Farbe:#999; } / * individual: Mozilla * /#Field2: -moz-Placeholder {color:#00f; }#field3: -moz-placeholder {color:#090; Hintergrund: LightGreen; Texttransformierung: Großbuchstaben; }#field4: -moz-Placeholder {font-style: italic; Textdekoration: Überaus; Buchstabenabteilung: 3px; Farbe:#999; }Kompatibel mit anderen Browsern, die den Platzhalter nicht unterstützen:
var placeholder = {
_Support: (function () {
Return 'Placeholder' in document.createelement ('Eingabe');
}) (),
// Der Stil des schnitten Textes muss an anderen Orten auf der Seite definiert werden
Klassenname: 'ABC',
init: function () {
if (! placeholder._support) {
// Der Textbereich wurde nicht verarbeitet. Fügen Sie hinzu, was Sie tun müssen
var inputs = document.getElementsByTagName ('input');
Platzhalter.Create (Inputs);
}
},
erstellen: Funktion (Eingänge) {
var Eingabe;
if (! inputs.length) {
Eingaben = [Eingänge];
}
für (var i = 0, länge = inputs.length; i <länge; i ++) {
Eingabe = Eingänge [i];
if (! placeholder._support && input.attributes && input.attributes.placeholder) {
Placeholder._setValue (Eingabe);
input.addeventListener ('Focus', Funktion (e) {
if (this.Value === this.attributes.placeholder.nodeValue) {
this.Value = '';
this.className = '';
}
}, FALSCH);
input.addeventListener ('Blur', Funktion (e) {
if (this.Value === '') {
Placeholder._setValue (this);
}
}, FALSCH);
}
}
},
_setValue: function (input) {
input.Value = input.attributes.PlaceHolder.nodeValue;
input.className = placeholder.className;
}
};
// Initialisieren Sie alle Eingaben bei der Seiteninitialisierung
//PLAPHOLDER.INIT ();
// oder ein Element separat festlegen
//Placeholder.create(document.getElementById('t1 '));