Ein Blick in das HTML5-Platzhalterattribut
Eines meiner Lieblingsstücke in HTML5 ist die Möglichkeit, hinzuzufügen Platzhaltertext leicht. Der Platzhaltertext ist der graue Text, den Sie in einem Eingabefeld finden, das den Benutzern einen Hinweis darauf gibt, welche Eingabe in diesem Feld erwartet wird. Sobald Benutzer mit der Eingabe beginnen Eingang Feld verschwindet dieser Text.
Früher machen wir das oft mit JavaScript, wie folgt;
Es ist nichts falsch mit dieser Praxis, aber es ist einfacher für HTML5.
Mit HTML5 wurde ein neues Attribut mit einem logischen Namen eingeführt. Platzhalter. Hier ist ein Beispiel:
Wenn wir es in den Browsern anzeigen, sollte die Eingabe jetzt den grauen Text haben, wie unten gezeigt.
Ein paar Dinge, die beachtet werden sollten: Platzhalter Attribut sollte nicht als Alternative zu a verwendet werden Etikette Es wird auch vorgeschlagen, dass dieses Attribut nur auf angewendet wird Eingang Typen, die Text erfordern, z. Text, Passwort, Suche, Email, Textbereich und tel.
Hinzufügen Platzhalter zum Eingang Typen: Radio und Kontrollkästchen macht keinen Unterschied.
Platzhalter & CSS
Darüber hinaus ist es auch möglich, den Platzhaltertext durch CSS zu gestalten. Dies ist jedoch zum Zeitpunkt der Erstellung dieses Dokuments noch auf Firefox- und Webkit-Browser beschränkt.
Das folgende Beispiel zeigt, wie wir den Platzhaltertext in Webkit und Firefox in grün ändern.
input :: - webkit-input-placeholder Farbe: grün; Eingabe: -oz-Platzhalter Farbe: Grün;
Nur zur Erinnerung, die :: - webkit-input-placeholder und : -moz-Platzhalter betrifft nur den Text und kann nicht parallel geschrieben werden.
input :: - webkit-input-placeholder, input: -moz-placeholder color: green;
Dieser Code funktioniert nicht.
Attributauswahl
CSS3 unterstützte dieses Attribut auch durch die Einführung von [Platzhalter] Attributauswahl;
Eingabe [Platzhalter] Rand: 1px durchgehend grün;
Im obigen Beispiel wählen wir alle aus Eingang das hat die Platzhalter Attribut und ändern Sie den Rand in grün.
Browser-Kompatibilität
Diese neue HTML5-Funktion wird in alten Browsern nicht überraschend unterstützt und wird derzeit nur in folgenden Versionen vollständig unterstützt: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 und Internet Explorer 10 (was noch nicht offiziell veröffentlicht wurde).
Platzhalter Polyfills
Trotzdem, wenn wir den Platzhalter in älteren Browsern anzeigen müssen, können wir trotzdem den Platzhalter Attribut können wir Polyfills verwenden. Es gibt viele Platzhalter Polyfills da draußen, aber in diesem Beispiel werden wir die PlaceMe.js verwenden;
Die PlaceMe.js, Wie Sie dem obigen Code-Snippet entnehmen können, ist es von jQuery abhängig. Wenn wir es beispielsweise in Internet Explorer 9 anzeigen, sollte jetzt bei allen Eingaben der Platzhaltertext angezeigt werden.
- Demo anzeigen
- Quelle herunterladen
Letzter Gedanke
Das HTML5-Platzhalter Das Attribut erleichtert sicherlich das Hinzufügen von Platzhaltertext. Nun liegt es an uns, Webentwicklern und Designern, die zu verwendende Methode zu wählen: JavaScript oder HTML5.
Wenn Sie der Meinung sind, dass die Verwendung von Polyfills und jQuery zur Unterstützung alter Browser überflüssig ist, ist JavaScript anscheinend eher für den Job geeignet. Wenn Sie die alten Browser jedoch friedlich ignorieren können, ist die Verwendung von HTML5 Placeholder wahrscheinlich der bessere Weg.
