nakedpassword.com:

The whole idea of naked password is to encourage your users to enter stronger passwords.

Our beautiful model Sally tastefully removes items of clothing as the password grows stronger.

Fun idea. If the plugin could automatically detect whether the user is female or male it would be even better.

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.

Christoph Boecken:

Was macht das Plugin? Beim Upload gibt es jetzt ein zusätzliches Dropdown-Feld und zwei Texteingaben, um die Art der Lizenz (alle Creative Commons sowie All Rights Reserved) einzugeben. Wenn ihr das Bild in den Beitrag einfügt wird der img-Tag mit sogenannten data-Parametern erweitert, die es seit HTML5 als eine Art Platzhalter für genau solche Daten gibt. Bei der Ausgabe im Blog wird das Foto dann in einen figure-Tag gepackt, per CSS die Lizenzinfo dann oben rechts über das Bild gelegt.

Christoph hat ein nettes, kleines Plugin für alle WordPress-Betreiber geschrieben, dass es ermöglicht Fotos leicht mit Lizenzen zu versehen und mit dem Original zu verlinken. Nette Sache für alle, die oft Fotos von anderen Fotografen einbinden.

Jetzt gibt’s hier auch eine „Ähnliche Artikel“ Funktion. Interne Vernetzung olé! :D