Eines meiner neuen Lieblingsstücke in HTML5 ist die Möglichkeit, Platzhaltertext einfach hinzuzufügen. Der Platzhaltertext ist der graue Text, den Sie in einem Eingabefeld finden, das verwendet wird, um den Benutzern einen Hinweis darauf zu geben, welche Eingabe in diesem Feld erwartet wird. Sobald Benutzer mit der Eingabe des Felds input beginnen, verschwindet dieser Text.
In den alten Tagen, wir tun dies häufig mit JavaScript, wie folgt;
Es ist nichts falsch mit dieser Praxis, aber es ist einfacher auf HTML5.,
HTML5 introduced a new attribute with a logical name; placeholder., Hier ist ein Beispiel:
<input type="text" placeholder="Placeholder Text">
Wenn wir es in den Browsern anzeigen, sollte die Eingabe jetzt den grauen Text haben, wie unten zu sehen;
Einige Dinge, die beachtet werden sollten: Gemäß der Spezifikation sollte die placeholder attribut sollte nicht als Alternative zu einem label und es wird auch vorgeschlagen, dass dieses Attribut nur angewendet werden sollte input Typen, die Text benötigen, zB, text, password, search, email, textarea und tel.
Das Hinzufügen vonplaceholder zu deninput – Typen:radio undcheckbox macht keinen Unterschied.
Placeholder & CSS
Darüber hinaus ist auch das Stylen des Platzhaltertextes über CSS möglich, ist jedoch zum Zeitpunkt dieses Schreibens immer noch nur auf Firefox-und Webkit-Browser beschränkt.,
Das folgende Beispiel zeigt, wie wir den Platzhaltertext sowohl in Webkit als auch in Firefox in Grün ändern;
input::-webkit-input-placeholder {color: green;}input:-moz-placeholder {color: green;}
Nur um sich zu erinnern, die ::-webkit-input-placeholder und :-moz-placeholder wirken sich nur auf den Text aus und können nicht parallel geschrieben werden.
input::-webkit-input-placeholder, input:-moz-placeholder {color: green;}
Dieser Code funktioniert nicht.,
Attributauswahl
CSS3 kam auch, um dieses Attribut durch die Einführung der Attributauswahl zu unterstützen;
input {border: 1px solid green;}
Im obigen Beispiel wählen wir jedes input mit der placeholder Attribut aus und ändern den Rand in grün.,
Browserkompatibilität
Diese neue HTML5-Funktion wird nicht überraschend in alten Browsern unterstützt und wird derzeit nur vollständig unterstützt in: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 und Internet Explorer 10 (die noch nicht offiziell veröffentlicht wurde).
Platzhalter Polyfills
Wenn wir den Platzhalter jedoch in älteren Browsern anzeigen müssen, aber dennoch das Attribut placeholder verwenden können, können wir Polyfills verwenden., Es gibt viele Platzhalter-Polyfills, aber in diesem Beispiel werden wir das Placem verwenden.js;
<script src="https://www.hongkiat.com/blog/html5-placeholder/amp/jquery.js" type="text/javascript"></script><script src="https://www.hongkiat.com/blog/html5-placeholder/amp/placeme.js" type="text/javascript"></script>
Die PlaceMe.js, wie Sie aus dem obigen Code-Snippet sehen können, ist abhängig von jQuery. Wenn wir es nun beispielsweise in Internet Explorer 9 anzeigen, sollten alle Eingaben jetzt den Platzhaltertext anzeigen.
- Demo anzeigen
- Quelle herunterladen
Letzter Gedanke
Das HTML5-Platzhalterattribut erleichtert das Hinzufügen von Platzhaltertext., Jetzt liegt es an uns, Webentwicklern und Designern, zu wählen, welche Methode verwendet werden soll: JavaScript oder HTML5.
Wenn Sie bedenken, dass die Verwendung von Polyfills und jQuery zur Unterstützung alter Browser redundant ist, ist JavaScript anscheinend besser für den Job geeignet. Wenn Sie die alten Browser jedoch friedlich ignorieren können, ist die Verwendung des HTML5-Platzhalters wahrscheinlich ein besserer Weg.