jQuery Passwort Ansicht ändern – show/hide password

So geht's: Passwort anzeigen und verstecken mit Bootstrap

Für eines meiner Projekte habe ich ein Admin Dashboard gebaut. Gerade da bietet sich Bootstrap an, da man sich voll und ganz auf die Backend Programierung konzentrieren muss, während das Frontend schnell, aber schön gemacht ist.

Zunächst einmal brauchen wir eine Klasse mit der ID togglePasswort. Mit Klick auf dieses Element wollen wir das Passwort in Klartext anzeigen lassen und auch wieder verstecken. In meinem Beispiel nutze ich die Icons von Fontawesome.

				<div class="form-group">
	<div class="input-group mb-2">
		<input autocomplete="off" type="password" name="password" class="form-control" id="password" placeholder="password" value="hey_i'm_a_secret_passwort_:)">
		<div class="input-group-append">
			<div id="togglePasswort" class="input-group-text">
				<i class="fa fa-eye-slash" aria-hidden="true"></i>
			</div>
		</div>
	</div>
</div>
			

Das war's auch schon. Hier findet ihr auch weitere Form Beispiele von Bootstrap.

Mit jQuery passiert die Magie

Nun benötigen wir noch ein paar Zeilen JS-Code. Bevor sie erst einmal durchlaufen werden, prüfen wir, ob es das Element div#togglePasswort überhaupt existiert. Wenn ja, dann können wir mit einem Klick auf das Element den Type des Input-Feldes ermitteln. Ist der Type password, dann tauschen wir es mit dem Type-Attribut text. Und wenn das Type-Attribut text ist natürlich mit password.

Damit sich beim Klick auf das Element auch das Auge-Icon ändert, toogeln wir Klassen fa-eye-slash mit fa-eye. So sieht der User auch, das etwas passiert. Etwas fürs "Auge" quasi 🙂

				if ( jQuery('div#togglePasswort').length ) {
	jQuery('div#togglePasswort').on('click', function() {
		var type	=	jQuery(this).closest('div.form-group').find('input').attr('type');
		if ( type == 'password' ) {
			jQuery(this).closest('div.form-group').find('input').attr('type', 'text');
		} else {
			jQuery(this).closest('div.form-group').find('input').attr('type', 'password');
		}
		jQuery(this).find('i').toggleClass('fa-eye-slash fa-eye');
	});
}