Afficher / Cacher le mot de passe avec Bootstrap v5 et JavaScript
Vous pouvez consulter la documentation Bootstrap v5 pour input-group
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Afficher mot de passe</title>
<!-- https://icons.getbootstrap.com -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" />
<!-- Bootstrap CSS v5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container p-3">
<div class="input-group">
<input type="password" class="form-control" placeholder="Mot de passe" aria-label="Mot de passe" />
<!-- bi-eye pour afficher une icône oeil -->
<i class="input-group-text bi-eye" onclick="toggleDisplayPassword(event)"></i>
</div>
</div>
<script>
/** La fonction qui écoute l'événement onclick */
function toggleDisplayPassword(event) {
/* La source de l'événement */
var srcElement = event.srcElement;
/* Récupère l'élément enfant qui précède l'élément source */
var passwordField = srcElement.previousElementSibling;
/* Si le champ est de type "mot de passe" */
if (passwordField.type == "password") {
/* Interversion des icônes */
srcElement.classList.remove("bi-eye");
srcElement.classList.add("bi-eye-slash");
/* Affiche le texte en clair */
passwordField.type = "text";
} else if (passwordField.type == "text") {
/* Interversion des icônes */
srcElement.classList.remove("bi-eye-slash");
srcElement.classList.add("bi-eye");
/* Cache le texte du mot de passe */
passwordField.type = "password";
}
}
</script>
</body>
</html>RĂ©sultat :
Commentaires
Enregistrer un commentaire