Afficher/masquer mot de passe dans un formulaire

Version imprimable

Bonjour,
j'ai trouvé un code pour effectuer cette action:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 function show() {
    var p = document.getElementById('pwd');
    p.setAttribute('type', 'text');
  }
  function hide() {
    var p = document.getElementById('pwd');
    p.setAttribute('type', 'password');
  }
  var pwShown = 0;
  document.getElementById("eye").addEventListener("click", function () {
    if (pwShown == 0) {
      pwShown = 1;
      show();
    } else {
      pwShown = 0;
      hide();
    }
  }, false);

avec le php suivant

Code:

1
2
3
4
5
6
7
8
9
10
<div class="form-group <?php if (array_key_exists('mdp', $errors) || array_key_exists('mdpconfirm',
      $errors)) echo 'has-error'; ?>">
      <div class="input-group form-group">
        <div class="input-group-prepend">
          <span class="input-group-text"><i class="fas fa-key"></i></span>
        </div>
        <input type="password" id="pwd" name="mdp" class="form-control" placeholder="Password" aria-describedby="pwdHelpBlock">
        <button type="button" id="eye" style="color:#FFF;background-color:#556b2f"><i class="far fa-eye"></i></button>
      </div>
    </div>

Ce qui fonctionne très bien, mais si j'ai besoin d'une confirmation de mot de passe

Code:

1
2
3
4
5
6
7
8
9
10
<div class="form-group <?php if (array_key_exists('mdpconfirm', $errors)) echo 'has-error'; ?>">
      <label for="mdpconfirm">Confirmation du mot de passe :</label>
      <div class="input-group form-group">
        <div class="input-group-prepend">
          <span class="input-group-text"><i class="fas fa-key"></i></span>
        </div>
        <input type="password"  id="pwd" name="mdpconfirm" class="form-control" placeholder="Password" aria-describedby="pwdHelpBlock"/>
        <button type="button" id="eye" style="color:#FFF;background-color:#556b2f"><i class="far fa-eye"></i></button>
      </div>
    </div>

L'affichage ne s'active pas sur le deuxième champ.
Merci d'avance pour vos conseils

10/10/2019, 11h08
danielhagnoul

:salut:

Un ID doit être unique dans la page web !

Votre confirmation doit avoir des ID (id="pwd et id="eye") différents.

masquer/afficher mot de passe dans un formulaire

Faut-il faire une deuxième fonction ou est-il possible d'inscrire deux autres id dans

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 function show() {
    var p = document.getElementById('pwd');
    p.setAttribute('type', 'text');
  }
  function hide() {
    var p = document.getElementById('pwd');
    p.setAttribute('type', 'password');
  }
  var pwShown = 0;
  document.getElementById("eye").addEventListener("click", function () {
    if (pwShown == 0) {
      pwShown = 1;
      show();
    } else {
      pwShown = 0;
      hide();
    }
  }, false);

Bonjour,

ls solutions les plus simples sont souvent les meilleures :

Code:

1
2
3
4
5
<input type="password" id="mdp" name="mdp" class="form-control" placeholder="Password" aria-describedby="pwdHelpBlock">
<button type="button" class="eye" style="color:#FFF;background-color:#556b2f" onclick="togglePwd('mdp');"><i class="far fa-eye"></i></button>
 
<input type="password" id="mdpconfirm" name="mdpconfirm" class="form-control" placeholder="Password" aria-describedby="pwdHelpBlock"/>
<button type="button" class="eye" style="color:#FFF;background-color:#556b2f" onclick="togglePwd('mdpconfirm');"><i class="far fa-eye"></i></button>

A NOTER l'utilisation :

des id id="mdp" et id="mdpconfirm"
et de la classe class="eye" (facultative)

Code:

1
2
3
4
5
6
"use strict";
function togglePwd(id)
{
  var x = document.getElementById(id);
  x.type = (x.type === "password")? "text" : "password";
}

Remarque :

Code:

x.type = (x.type === "password")? "text" : "password";

est la syntaxe de l'"opérateur (ternaire) conditionnel", équivalent à :

Code:

1
2
3
4
5
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }

Exemple n'utilisant pas des ID pour les inputs password :

Code:

1
2
3
4
5
<label>Mot de passe : </label><input type="password" name="mdp1">
<br>
<label>Confirmer le mot de passe : </label><input type="password" name="mdp2">
<br>
<button type="button" id="eye">Enregistrer le mot de passe</button>

Code:

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
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    const
        elemBtnEnregistrer = document.querySelector('#eye'),
        elemsPassword = Array.from(document.querySelectorAll('input[name^="mdp"]'));
 
    elemBtnEnregistrer.addEventListener('click', ev => {
        let
            mdp1 = elemsPassword[0].value,
            mdp2 = elemsPassword[1].value;
 
        if (mdp1 === mdp2) {
            // code pour enregistrer le mot de passe sur le serveur
 
            // debug
            console.log(`Les deux mots de passe sont identiques.`);
        } else {
            elemsPassword[0].value = '';
            elemsPassword[1].value = '';
 
            alert(`Les mots de passe sont différents, recommencer SVP.`)
        }
    }, {
        capture: false,
        passive: true,
        once: false
    });
 
    // fin code du test
 
}, {
    capture: false,
    passive: true,
    once: false
});

Oui, j'avais un peu ce genre d'idée:

Code:

1
2
3
4
5
<div>
<label for="pwd"> mot de passe </label> <input type="password" id="pwd" /><button id="eye" class="oeil">voir</button>
<br /> 
<label for="pwd2"> confirmer </label> <input type="password" id="pwd2" /><button id="eye2" class="oeil">voir</button>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
const o=document.querySelectorAll(".oeil");
for(i of o){
i.addEventListener("click",(e) => {
 let q=e.target.previousSibling;
 q.type = q.type == "text" ? "password" : "text";
	i.textContent= (document.getElementById("pwd").value!=document.getElementById("pwd2").value) ?
	"les mots de passe sont différents!" : "voir";// le texte du bouton de confirmation change
	},false)
}

Code:

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
<script>
                                                function show() {
                                                        var p = document.getElementById('pwd');
                                                        p.setAttribute('type', 'text');
                                                        var p2 = document.getElementById('pwd2');
                                                        p2.setAttribute('type', 'text');
                                                }
                                                function hide() {
                                                        var p = document.getElementById('pwd');
                                                        p.setAttribute('type', 'password');
                                                        var p2 = document.getElementById('pwd2');
                                                        p2.setAttribute('type', 'password');
                                                }
                                                var pwShown = 0;
                                                document.getElementById(\"eye\").addEventListener(\"click\", function () {
                                                        if (pwShown == 0) {
                                                                pwShown = 1;
                                                                show();
                                                        } 
                                                        else {
                                                                pwShown = 0;
                                                                hide();
                                                        }
                                                }, false);
                                        </script>

Dans le INPUT de la confirmation, ajouter id="pwd2"
exemple:

Code:

<input name="votre_mot_de_passe" id="pwd">  <input name="votre_mot_de_passe_confirmation" id="pwd2"> <img src="./mes_images/oeuil.jpg" id="eye">

Et utilisez le meme oeuil pour passer de hidde au show pour les 2 zones de saisies

13/01/2021, 08h22
SpaceFrog

Citation:

oeuil

Un œuf ou un œil ?
:mrgreen: