Ihr kennt alle den schönen Effekt, wenn man in ein Eingabefeld klickt und der Text darin verschwindet. Bei einem Anmeldeformular zum Beispiel steht in einem Feld Username, man klickt rein und der Platzhalter verschwindet. Gibt man nichts ein und klickt wieder außerhalb des Feldes, dann steht der ursprüngliche Text wieder drin.
Dieser Effekte musste immer per JavaScript erzeugt werden. Dank HTML5 und dem placeholder-Attribut geht das mittlerweile für aktuelle Browser (Chrome, Safari ab Version 4, Firefox ab Version 7, Opera ab Version 11.5) auch einfacher.
Mal angenommen wir haben ein einfaches Input-Feld mit einem vor definierten Inhalt.
<input type="text" value="Vorname" />
Wenn man jetzt in das Feld klickt passiert nichts. Man muss Vorname selbst rauslöschen um den eigenen Namen eingeben zu können. Das ist natürlich ziemlich blöd. Um das einfach und schnell zu lösen benutzen wir einfach statt value, placeholder.
<input type="text" placeholder="Vorname">
Die komplette restliche Arbeit nimmt uns HTML5 ab. Klick ins Feld und wir können unseren Namen eintragen und Vorname verschwindet. Tragen wir nichts ein und klicken außerhalb des Feldes steht weiterhin Vorname drin. Alles ganz ohne JavaScript.
Wer möchte, dass das ganze auch im Internet Explorer funktioniert, für den gibt es das jQuery Plugin Placeholder. Einfach jQuery, das Plugin sowie eine eigene scripts.js für unseren Code einbinden…
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.placeholder.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>
… und dann noch das Plugin in der scripts.js aufrufen. Fertig.
$(document).ready(function(){
$('input, textarea').placeholder();
});
Das ersetzt dann in alten Browsern bei allen Inputfelder und Textareas den placeholder. Man könnte das natürlich auch nur auf einzelne Felder anwenden, z.B:
$(document).ready(function(){
$('#search').placeholder();
});
Viel Spaß damit. Ich nutze es andauernd und es macht die ätzende Arbeit mit Formularen ein Stück angenehmer.