Eine Eigenschaft, die ich zwar noch nicht im Praxiseinsatz gesehen habe (jedenfalls nicht bewusst), die ich aber vor einiger Zeit in so einer "50 hübsche Ideen für ein Login"-Serie gesehen und sofort gemocht habe: die Option, beim Registrieren das Passwort auf Befehl anzuzeigen bzw. zu verstecken. Macht durchaus Sinn, finde ich. Und wollte es dann auch gleich nachbauen... mit Javascript/jQuery sollte das doch eigentlich relativ einfach gehen!

Dabei stieß ich allerdings auf ein Problem, welches zwar berechtigt ist, jedoch ersteinmal das ganze als unlösbar darstellt (auf den ersten Blick jedenfalls): man kann das HTML-Attribut type eines Input-Feldes mittels Javascript nicht ändern! Also muss man sich eines kleinen Tricks behelfen, der zwar ein paar Zeilen mehr Code beansprucht, aber trotzdem eigentlich relativ simpel ist: einfach ein zweites Input-Feld vom Typ text, welches auf Klick anstelle des normalen Passwort-Feldes angezeigt wird und dessen Wert auch übernimmt. Mit einem weiteren Klick wird die ganze Aktion umgekehrt gestartet. Als Code sieht das dann so aus:

HTML:

  1. <input type="password" id="password" name="password" /><input type="text" id="password_fake" name="password_fake" /><br />
  2. <input type="checkbox" id="show_password" name="show_password" value="Passwort zeigen" /> Passwort anzeigen

Wichtig! Da es ja noch immer Leute geben soll die mit dem Internet Explorer surfen, darf zwischen den Passwort-Feldern (also dem richtigen und dem "falschen") kein Leerzeichen sein, da der IE dieses sonst ausgibt und die "Fälschung" leicht verschoben dargestellt wird 😉

Werbung

Werbeblocker aktiv?

Vermutlich aufgrund eines Werbeblockers kann an dieser Stelle leider keine Werbung angezeigt werden. Als Blog ist diese Website jedoch darauf angewiesen, um diverse Kosten abdecken zu können.

Vielleicht möchtest du Servaholics ja in deinem Werbeblocker als Ausnahme hinzufügen und so unterstützen? Das wäre jedenfalls sehr nett! :-)

jQuery:

$(document).ready(function(){
 
     $('#show_password').change(function(){
          if($(this).is(":checked")){
               $('#password_fake').val($('#password').val());
               $('#password').hide();
               $('#password_fake').show();
          } else {
               $('#password').val($('#password_fake').val());
               $('#password_fake').hide();
               $('#password').show();
          }
     });
 
});

Jetzt gibt es nur noch ein Problem: in der Verarbeitung bzw. dem eigentlichen Login-Prozess. Denn hier muss natürlich das richtige Passwort benutzt werden - was, wenn man als letztes die Option auf "Passwort zeigen" hatte, jedoch das andere, das "richtige" Passwort benutzt wird? Ich habe das ganze mittels PHP gelöst: wenn die Checkbox aktiviert ist, soll der Passwort-Fake als $password gesetzt werden - wenn nicht, dann eben das normale, richtige Passwort-Feld.

PHP:

  1. <?php
  2. if(isset($_POST['show_password']) && $_POST['show_password'] == "Passwort zeigen") $password = $_POST['password'];
  3. else $password = $_POST['password_fake'];
  4.  
  5. // Weitere Code folgt hier...
  6.  
  7. ?>

Viel Spaß mit dem Anzeigen des Passwortes! 😉

Über den Autor:

Grafikdesigner, Webentwickler und Schreiberling. Außerdem Art Direktor und Redakteur beim Spongo. Liebt angebissene Äpfel!

Andere Beiträge, die auf diesen Beitrag verlinken

Jetzt bist du dran: Was denkst du?

Bitte beachte: Auch wenn das Angeben einer E-Mail-Adresse optional ist, so bist du doch nicht vollständig anonym, denn u.a. deine IP-Adresse wird mit dem Absenden dieses Formulars gespeichert.



Tastenkürzel


Überall

j: Älterer Artikel

k: Neuerer Artikel

s: Suchen

h: Hilfe


Auf Artikel-Seiten

t: Auf Twitter posten

f: Auf Facebook posten

g: Auf Google+ posten