Passwort versteckt oder lesbar eingeben

Es begegnet einem in immer mehr Login-Formularen: Die Möglichkeit, das Passwort auf Klartext (lesbar) umschalten zu können um damit die Eingabe direkt zu kontrollieren. Für die Übertragungssicherheit spielt es keine Rolle – und in den meisten Fällen schaut einem auch niemand über die Schulter.

Die Lösung ist in wenigen Zeilen jQuery umgesetzt.

Zunächst gibt es im HTML diese beiden Elemente:

  1. <input id="password" name="password" type="password" placeholder="*******" />
  2. <a id="pwToggle" href="login.php">Passwort lesbar eingeben</a>

Neben dem <input>-Element findet sich ein <a>-Element um das Feld switchen zu können. Das Attribut placeholder=“********“ ist nötig, um beim Wechsel zu verdeutlichen, dass das Passwort versteckt ist.

Die folgenden Zeilen jQuery arbeiten nun so, dass sie bei Klick auf „#pwToggle“ den Typ des <input>-Element auslesen und dann jeweils type und placeholder im <input>-Element als auch den Text des <a>-Elements ändern.

  1. <script>
  2.    $(document).ready(function () {
  3.       $('body').on('click', '#pwToggle', function () {
  4.          var pw = $('#password');
  5.          if (pw.get(0).type == 'text') {
  6.             pw.prop({type: 'password', placeholder: '********'});
  7.             $('#pwToggle').html('Passwort lesbar eingeben');
  8.          } else {
  9.             pw.prop({type: 'text', placeholder: 'Passwort'});
  10.             $('#pwToggle').html('Passwort versteckt eingeben');
  11.          }
  12.          return false;
  13.       });
  14.    });
  15. </script>

Das wars auch schon. Lässt sich mit jQuery ab Ver. 1.6 einsetzen.

Schreibe einen Kommentar