Afficher masquer en JS

**gesualda** · 13/03/2024, 19h12

Bonjour à tous,

J'ai recupéré un bout de code pour afficher/masquer un mot de passe Cela ne fonctionne pas. (Il faut dire je suis pas très doué en JS ... lol)
SI je pouvais savoir savoir ou est mon erreur et comment corriger ?
Par avance merci

Je vous met le bout de code partie du formulaire :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div class="form-group">
                    <label class="form-label"><span>*</span> Mot de passe</label>    
                    <input type="password" id="mdp" name="password" placeholder="Mot de passe" class="form-input <?php if(isset($errors['password'])): ?> <?= $erreur ?> <?php endif ?>" value="<?=  $_POST['password'] ?? '' ?>" />                     
                        <i class="fa-regular fa-eye"></i>                
                </div>
 
                 <div class="form-group">  
                     <label class="form-label"> <span>*</span> Confirmez le mot de passe</label>   
                     <input type="password" id="mdp2" name="password_confirm" placeholder="Confirmez le mot de passe" class="form-input <?php if(isset($errors['password_confirm'])): ?> <?= $erreur ?> <?php endif ?>" value="<?=  $_POST['password_confirm'] ?? '' ?>" />
                        <i class="fa-regular fa-eye"></i>   
                </div>

Et le bout de code JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
    let input = document.querySelector('.form-group input');    
    let show = document.querySelector('.form-group i');
 
    show.onclick = function(){
        if(input.type === "password"){
            input.type = "text";
            show.classList.add('active');
        }else{
            input.type = "password";
            show.classList.remove('active');
        }
    }

Pour le CSS concernant la balise i :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.form-group{    
    display: flex;
    flex-direction: column;
    padding: 10px;
    width: 100%;
    position: relative;
 
& i{
    position: absolute;
    color: rgb(82, 78, 129);
    top:58px;
    right: 20px;
    font-size: 130%;
    cursor: pointer;
}
 
& i.active::before{
    content:'\f070';
}

**ASCIIDEFOND** · 14/03/2024, 09h49

Salut gesualda,

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
        .form-group {
            display: grid;
            padding: 10px;
            column-gap: 16px;
            grid-auto-columns: max-content;
            grid-template-columns: 200px auto auto;
        }
 
        label {
            text-align: right;
        }
 
        i {
            color: rgb(82, 78, 129);
            font-size: 130%;
            cursor: pointer;
            border: 1px solid gray;
            width: max-content;
 
        }
 
        i.active::before {
            content: '\f070';
        }

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
        let inputS = document.querySelectorAll('.form-group .form-input'),
            eyeS = document.querySelectorAll('.form-group i')
 
        eyeS.forEach((eye, index) => {
            eye.onclick = function () {
                inputS[index].type === "password" ?
                    [inputS[index].type = "text",
                    eye.classList.add('active')] :
                    [inputS[index].type = "password",
                    eye.classList.remove('active')]
            }
        })

**gesualda** · 14/03/2024, 11h50

Hello ASCIIDEFOND

Tout d'abord merci de m'avoir porter une réponse. Alors je suis un peu dans l’incompréhension du résultat. Je m'explique:

Le code fonctionne à merveille si je recopie le formulaire sans php, dans une page html, tout fonctionne.

Dès que j'utilise mon formulaire sur ma page php, l’icône change bien, mais c'est comme si le code JS ne transformait pas en "text". Les caractères du "password" ne sont pas visible. (Etrange) !

Si tu as une idée, bien sur, je suis preneur.
Merci

PS : je viens de recréer le formulaire uniquement en html, cela ne fonctionne pas non plus. lol

**ASCIIDEFOND** · 14/03/2024, 16h53

Envoyé par gesualda

...PS : je viens de recréer le formulaire uniquement en html, cela ne fonctionne pas non plus. lol

Tu peux nous montrer ce code HTML ?

**gesualda** · 14/03/2024, 18h52

D'accord, du coup, je te mets toute la page.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />
 
    <link rel="stylesheet" href="../css/adminCSS.css" />
    <title>Administration Pizzeria</title>
</head>
 
<body>
 
    <div class="container">
        <div class="cnt-gestion">
            <h1>Gestion administrative</h1>
            <h2 class="inscription">Ajout d'un membre</h2>
 
            <!-- Container du formulaire  -->
            <section class="cnt-box-form">
                <form action="" method="POST" class="form_register">
 
                    <div class="form-group">
                        <label class="form-label"><span>*</span> Nom</label>
                        <input type="text" name="nom" placeholder="Nom" class="form-input" />
                    </div>
 
                    <div class="form-group">
                        <label class="form-label"><span>*</span> Prénom</label>
                        <input type="text" name="prenom" placeholder="Prénom" class="form-input" />
                    </div>
 
                    <div class="form-group">
                        <label class="form-label"><span>*</span> Email</label>
                        <input type="text" name="email" placeholder="Email" class="form-input" />
                    </div>
 
                    <div class="form-group">
                        <label class="form-label"><span>*</span> Mot de passe</label>
                        <input type="password" name="password" placeholder="Mot de passe" class="form-input" />
                        <i class="fa-regular fa-eye"></i>
                    </div>
 
                    <div class="form-group">  
                     <label class="form-label"> <span>*</span> Confirmez le mot de passe</label>   
                     <input type="password" name="password_confirm" placeholder="Confirmez le mot de passe" id="pwd2" class="form-input" />
                        <i class=" fa-regular fa-eye"></i>   
                    </div>
 
                    <!-- <div class="form-group">
                        <label class="select_lab"> <span>*</span> Selectionnez le status</label>
                        <select name="status" class="form-input">
 
                        </select>
                    </div> -->
                    <button type="submit" class="form-btn-add" name="ajout">Ajouter le membre</button>
                </form>
 
            </section>
        </div>
    </div>
 
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"> </script>
    <script src="jquery.js"></script>
    <script type="text/javascript">
        let inputS = document.querySelectorAll('.form-group .form-input'),
            eyeS = document.querySelectorAll('.form-group i')
 
        eyeS.forEach((eye, index) => {
            eye.onclick = function () {
                inputS[index].type == "password" ?
                    [inputS[index].type = "text",
                    eye.classList.add('active')] :
                    [inputS[index].type = "password",
                    eye.classList.remove('active')]                
            }
        })
    </script>
</body>
</html>

**ASCIIDEFOND** · 14/03/2024, 20h33

Sur ton premier code il n'y avait que deux champs, il est normal que le script ne fonctionne pas avec quatre champs.

Code script :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
        eyeS = document.querySelectorAll('.form-group i')
 
        eyeS.forEach((eye, index) => {
            eye.onclick = function () {
                let inputS = eye.previousElementSibling // On sélectionne la balise <input> se trouvant avant la balise <i>
                inputS.type === "password" ?
                    [inputS.type = "text",
                    eye.classList.add('active')] :
                    [inputS.type = "password",
                    eye.classList.remove('active')]
            }
        })

**gesualda** · 14/03/2024, 20h47

ASCIIDEFOND, merci beaucoup d'avoir passer du temps à m'aider.

Pour le formulaire, je comprends bien, mais j'ai précisé que c'était un extrait du formulaire.
En tous les cas, j'ai noté ce qui se passait du coté du code. cela a l'air passionnant.

Je pense que je vais m'interresser un peu plus à ce language.
J'ai en effet, testé la correction. Ca marche nikel.

Bonne soirée et merci encore
JLuc

Afficher masquer en JS

JavaScript

Discussions similaires

Partager

Partager