5 avril 2018 à 20:55:54

Bonjour,

Je souhaiterais savoir comment faire pour que lorsque je tape un mot de passe dans un input de type password, il y ait un bouton pour afficher le mot de passe taper.

Exemple en images :

1) Le mdp est masqué =>

2) Le mdp est affiché =>

Voila je ne sais pas comment faire. J'espère que vous pourrez m'aider (si vous le souhaitez )

Je continu de faire des recherches sur ce sujet

En espérant avoir été clair

Cordialement

Thibault

eclairia

5 avril 2018 à 21:02:23

Bonjour,

Une solution simple pourrait être de changer le type de l'input à chaque fois que tu cliques sur le bouton.

Si le mdp est caché => input de type password

Si le mdp n'est pas caché, input de type text

"Ils ne savaient pas que c'était impossible, alors ils l'ont fait" Mark Twain

(o-o)

5 avril 2018 à 21:14:59

eclairia a écrit:

Bonjour,

Une solution simple pourrait être de changer le type de l'input à chaque fois que tu cliques sur le bouton.

Si le mdp est caché => input de type password

Si le mdp n'est pas caché, input de type text

Est ce que ce serait un peu dans ce genre là, bien que ce code ne fonctionne pas. Je ne sais d'ailleurs pas pourquoi il ne fonctionne pas, si vous avez une idée n'hésitez pas à me le dire :

<!DOCTYPE html>
<html>
<head>
	<title>Show Password</title>
	<meta charset="utf-8">
</head>
<body>

	<h1>Afficher le mot de passe :</h1>
	<input type="password" id="password"><br>
	<label for="checkbox">
		<input type="checkbox" id="checkbox">
		Afficher le mot de passe
	</label>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var checkbox = $("#checkbox");
		var password = $("#password");
		checkbox.click(function() {
			if(checkbox.prop("checked")) {
				password.attr("type", "text");
			} else {
				password.attr("type", "password");
			}
		});
	});
</script>
</body>
</html>

eclairia

5 avril 2018 à 21:34:13

Ton code fonctionne chez moi.

Regardes dans la console de chrome si ton jquery est bien chargé.

"Ils ne savaient pas que c'était impossible, alors ils l'ont fait" Mark Twain

(o-o)

5 avril 2018 à 21:37:52

Bon est bien malheureusement ça ne fonctionne pas.

J'ai essayé de changer l'extension du fichier qui était avant en .php et maintenant en .html mais ça ne veut toujours pas :euh:

-
Edité par (o-o) 6 avril 2018 à 7:43:18

Maestro974

6 avril 2018 à 10:01:51

Slt,

ton script marche bien chez moi !

vérifie que le fichier jquery.min.js se trouve bien dans ton dossier JS.

Sinon, passe directement par le cdn de JQuery :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Pouce bleu à celui qui vous a aidé! Poster votre code : balise </> ! lire les règles générales, charte de bonne conduite :)

(o-o)

6 avril 2018 à 16:33:45

Merci beaucoup pour votre aide grâce à vous tous (mais en particulier à @Maestro974 ) mon script fonctionne à merveille.

Je vous remercie tous infiniment

Je met le code pour les futurs petits (ou grands) chercheurs dans ce domaine :lol:

<!DOCTYPE html>
<html>
<head>
    <title>Show Password</title>
    <meta charset="utf-8">
</head>
<body>
 
    <h1>Afficher le mot de passe :</h1>
    <input type="password" id="password"><br>
    <label for="checkbox">
        <input type="checkbox" id="checkbox">
        Afficher le mot de passe
    </label>
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var checkbox = $("#checkbox");
        var password = $("#password");
        checkbox.click(function() {
            if(checkbox.prop("checked")) {
                password.attr("type", "text");
            } else {
                password.attr("type", "password");
            }
        });
    });
</script>
</body>
</html>

Thibault

-
Edité par (o-o) 6 avril 2018 à 16:36:36

Maestro974

7 avril 2018 à 15:20:52

Ahaha content que ça fonctionne et qu'on ait résolu ton problème !

Bonne journée à toi

Pouce bleu à celui qui vous a aidé! Poster votre code : balise </> ! lire les règles générales, charte de bonne conduite :)

AbdoulayeSY3

9 décembre 2019 à 16:09:14

merci pour cette fonctionnalité je l'ai integré dans mon application et ça marche bien

AbcAbc6

9 décembre 2019 à 16:31:33

@AbdoulayeSY3 Bonjour, pour dire merci vous pouvez cliquer sur les pouces levés des messages qui vous ont aidés.

Merci de ne pas déterrer d'ancien sujet résolu.

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"

soit de créer un nouveau sujet décrivant votre propre contexte

ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

-
Edité par AbcAbc6 9 décembre 2019 à 16:32:42

Forums des Zéros

Afficher mot de passe

Déterrage

Afficher mot de passe

Déterrage

Supprimer

Modérer

Signaler le message aux modérateurs