Activer/désactiver la visibilité du champ de mot de passe
Dernière mise à jour : 23 septembre 2024
- Rubriques :
- Formulaires adaptatifs
Créé pour :
- Débutant
- Développeur
Un cas pratique courant consiste à permettre aux utilisateurs et utilisatrices de formulaire de basculer vers la visibilité du texte saisi dans le champ du mot de passe.
Pour réaliser ce cas d’utilisation, j’ai utilisé l’icône en forme d’œil de la Bibliothèque de polices Awesome. Les fichiers CSS requis et eye.svg sont inclus dans la bibliothèque cliente créée pour cette démonstration.
Exemple de code
Le formulaire adaptatif comporte un champ de type PasswordBox appelé ssnField.
Le code suivant est exécuté lors du chargement du formulaire.
$(document).ready(function() {
$(".ssnField").append("<p id='fisheye' style='color: Dodgerblue';><i class='fa fa-eye'></i></p>");
$(document).on('click', 'p', function() {
var type = $(".ssnField").find("input").attr("type");
if (type == "text") {
$(".ssnField").find("input").attr("type", "password");
}
if (type == "password") {
$(".ssnField").find("input").attr("type", "text");
}
});
});
Le CSS suivant a été utilisé pour positionner l’icône œil dans le champ du mot de passe.
.svg-inline--fa {
/* display: inline-block; */
font-size: inherit;
height: 1em;
overflow: visible;
vertical-align: -.125em;
position: absolute;
top: 45px;
right: 40px;
}
Déployez l’exemple de bouton (bascule) du mot de passe.
- Téléchargez la bibliothèque cliente.
- Téléchargez l’exemple de formulaire.
- Importez la bibliothèque cliente à l’aide de l’interface utilisateur du gestionnaire de packages.
- Importez l’exemple de formulaire à l’aide de Formulaires et documents.
- Prévisualisez le formulaire.
recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e