Beispiele für die Verwendung des Platzhalterattributs in HTML5 und Methoden zur Verschönerung des Anzeigeeffekts_HTML5-Tutorial-Fähigkeiten

Mit dem Platzhalterattribut können Sie Eingabeaufforderungsinformationen im Textfeld anzeigen. Sobald Sie Informationen in das Textfeld eingeben, werden die Eingabeaufforderungsinformationen ausgeblendet. Sie haben diesen Effekt vielleicht schon unzählige Male gesehen, aber die meisten davon wurden in JavaScript implementiert, aber jetzt bietet HTML5 native Unterstützung, und der Effekt ist noch besser!

HTML-Code

Code kopieren

Der Code lautet wie folgt:

< ;input type="text" name="first_name" placeholder="Your name..." />

Sie haben auch gesehen, dass Sie lediglich das Platzhalterattribut zur Deklaration hinzufügen müssen Tag des Textfelds. Um diesen Effekt zu erzeugen, ist überhaupt kein JavaScript erforderlich.

Überprüfen Sie, ob der Browser das Platzhalterattribut unterstützt

Da Platzhalter ein neues Attribut ist, müssen Sie prüfen, ob Ihr Browser es unterstützt. IE6 und IE8 unterstützen es beispielsweise definitiv nicht:

Code kopieren

Der Code lautet wie folgt:

function hasPlaceholderSupport() {
var input = document.createElement('input');
return ( 'placeholder' in input);
}

Wenn der Browser des Benutzers die Platzhalterfunktion nicht unterstützt, müssen Sie MooTools, Dojo oder andere JavaScript-Tools verwenden, um sie zu implementieren:

Code kopieren

Der Code lautet wie folgt:

/* mootools ftw */
var firstNameBox = $('first_name '),
message = firstNameBox.get('placeholder');
firstNameBox.addEvents({
focus: function() {
if(firstNameBox.value = = message) { searchBox.value = ''; }
}
});

Platzhalter mit CSS verschönern

Bei weiteren Recherchen habe ich ein weiteres interessantes CSS-Feature entdeckt: CSS verschönert den INPUT-Platzhaltereffekt. Lassen Sie mich einfachen CSS-Code verwenden, um den Platzhaltertext im Textfeld zu verschönern.

CSS-Code

Die Verwendung in Firefox unterscheidet sich von der in Google Chrome. Ihre Namen sind leicht zu verstehen:

Kopieren Sie den Code

Der Code lautet wie folgt:

/ * all */

::-webkit-input-placeholder { color:#f00; }

::-moz-placeholder { color:#f00; } /* firefox 19 */
:-ms -input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }
/* individual: webkit */
#field2 ::- webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; text-transform:uppercase; ::- webkit-input-placeholder { font-style:italic; text-spacing:3px; color:#999; -moz-placeholder { color:#00f; {font-style:italic;text-decoration:overline;letter-spacing:#999;
Sie können Schriftart, Farbe und Stil des Platzhaltertextes steuern. Sie können den Platzhalter für das Textfeld sogar animieren. Die Verschönerung Ihrer Textfelder mag wie eine Kleinigkeit erscheinen, aber bei einigen interaktiven Websites liegt der Schlüssel zum Erfolg im Detail. Jetzt unterstützt IE10 nur noch Platzhalter. Ich glaube, dass immer mehr Menschen diesen nativen Platzhaltereffekt nutzen werden.