Comment afficher le mot de passe d'un input HTML ?

Réponses rédigées par Antoine

Dernière mise à jour : 2020-10-20 11:07:14

Question

Comment puis-je afficher ou masquer le mot de passe d'un input HTML du type password ?

<input type="password" value="collaborativejob" id="motdepasse">

Réponse

Pour afficher ou masquer le mot de passe d'un input HTML, vous pouvez créer un élément cliquable pour modifier la valeur de l'attribut type :

La valeur password masque le mot de passe.
La valeur text affiche le mot de passe.

Dans l'exemple qui suit, on crée une case à cocher, et on utilise l'évènement onclick JavaScript pour déclencher la fonction qui va afficher, ou masquer, le mot de passe de la balise <input> HTML.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Comment afficher le mot de passe d'un input HTML ?</title>
</head>
<body>
<input type="password" value="collaborativejob" id="motdepasse">
<input type="checkbox" onclick="Afficher()"> Afficher le mot de passe
<script>
function Afficher()
{ 
var input = document.getElementById("motdepasse"); 
if (input.type === "password")
{ 
input.type = "text"; 
} 
else
{ 
input.type = "password"; 
} 
} 
</script>
</body>
</html>