jQuery Passwort Ansicht ändern – show/hide password
Gerade bei Profil- oder Registrierungsseiten ist es ratsam dem User die Möglichkeit zu geben, das Passwort in Klartext noch einmal zu kontrollieren. Im folgenden Beispiel findet ihr auf Basis der Bootstrap Klassen ein Beispiel, wie man mit jQuery das Passwort show / hide kann.
- HTML
- JS
- CSS
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');
});
}.form-group {
padding: 24px;
}
.input-group {
display: flex;
flex-wrap: nowrap;
align-content: stretch;
align-items: stretch;
}
.input-group-append {
margin-left: auto;
background: #eee;
width: 48px;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
cursor: pointer;
}
.input-group-append:hover {
background: #5dd39e;
color: #fff;
}Keine Produkte gefunden.
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.
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 🙂
Keine Produkte gefunden.
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');
});
}Und so einfach könnt Ihr mit jQuery ein Passwort in einem Input Feld anzeigen und verstecken lassen.
Das Ganze lässt sich auch ein wenig einfacher lösen, wenn man die Elemente direkt anspricht:
jQuery(‚#toggle‘).on(‚click‘, function() {
let pass = jQuery(‚#password‘);
if (pass.attr(‚type‘) === ‚password‘) {
pass.attr(‚type‘, ‚text‘);
} else {
pass.attr(‚type‘, ‚password‘);
}
jQuery(this).toggleClass(‚fa-eye-slash fa-eye‘);
});
Die Prüfung auf Existenz kann an dieser Stelle weggelassen werden. Warum sollten wir Code einbinden, der auf Elemente verweist, die es nicht gibt?