Kommentar: In HTML5 wurden viele interessante neue Funktionen eingeführt. Einige spiegeln sich in HTML wider, einige sind JavaScript -APIs, die alle sehr nützlich sind. Eine meiner Lieblingsfunktionen ist die Platzhaltereigenschaft im Textfeld (Eingabe).
Mit der Platzhaltereigenschaft können Sie Eingabeaufforderungsinformationen im Textfeld anzeigen. Sobald Sie Informationen in das Textfeld eingegeben haben, werden die Eingabeaufforderungsinformationen versteckt. Sie haben diesen Effekt vielleicht unzählige Male zuvor gesehen, aber die meisten von ihnen sind in JavaScript implementiert, und jetzt bietet HTML5 native Unterstützung und funktioniert besser!
HTML -Code
Sie haben auch gesehen, dass Sie nur das Platzhalterattribut zum Deklarationsetikett des Textfelds hinzufügen müssen. JavaScript wird überhaupt nicht benötigt, um diesen Effekt zu erzeugen.
Überprüfen Sie, ob der Browser das Platzhalterattribut unterstützt
Da Platzhalter eine neue Immobilie sind, ist es sehr notwendig zu prüfen, ob Ihr Browser es unterstützt. Zum Beispiel werden IE6 und IE8 definitiv nicht unterstützt:
Funktion hasplaceholdersupport () {
var input = document.createelement ('Eingabe');
return ('Platzhalter' in der Input);
}
Wenn der Browser des Benutzers die Platzhalterfunktion nicht unterstützt, müssen Sie Mootools, DOJO oder andere JavaScript -Tools verwenden, um es zu implementieren:
/* Mootools ftw! */
var FirstNameBox = $ ('First_Name'),
Message = FirstNameBox.get ('Platzhalter');
FirstNameBox.adDevents ({{
Fokus: function () {
if (firstNameBox.Value == meldung) {SearchBox.Value = ''; }
},
Blur: function () {
if (firstNameBox.Value == '') {SearchBox.Value = message; }
}
});
Verschmelzen Sie den Platzhalter mit CSS
Während der weiteren Forschung entdeckte ich ein weiteres interessantes CSS -Merkmal: CSS, das den Eingangs -Platzhaltereffekt verschönert. Lassen Sie mich den einfachen CSS -Code verwenden, um den Platzhaltertext im Textfeld zu verschönern.
CSS -Code
Die Verwendung im Firefox -Browser unterscheidet sich von der in Google Chrome. Ihre Namen sind leicht zu verstehen:
/* alle */
::-Webkit-Input-Placeholder {Farbe:#f00; }
::-Moz-Placeholder {Farbe:#f00; } / * Firefox 19+ * /
: -ms-Input-Platzhalter {Farbe:#f00; } / * ie * /
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 {Schriftstil: Italic; Textdekoration: Überaus; Buchstabenabteilung: 3px; Farbe:#999; }
/ * individual: mozilla */
#Field2 ::-Moz-Placeholder {Farbe:#00f; }
#Field3 ::-Moz-Placeholder {Farbe:#090; Hintergrund: LightGreen; Texttransformierung: Großbuchstaben; }
#Field4 ::-Moz-Placeholder {Schriftstil: Italic; Textdekoration: Überaus; Buchstabenabteilung: 3px; Farbe:#999; }
Sie können die Schriftart, Farbe und den Stil des Platzhaltertextes steuern. Sie können den Platzhalter des Textfelds sogar auf animierte Weise anzeigen. Die Verschönerung Ihrer Textfelder ist etwas, das klein aussieht, aber für einige interaktive Websites liegt der Schlüssel zum Erfolg in den Details. Jetzt unterstützt IE10 nur Platzhalter. Ich glaube, dass immer mehr Menschen diesen einheimischen Platzhaltereffekt nutzen werden.