IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Afficher/masquer mot de passe dans un formulaire


Sujet :

JavaScript

  1. #1
    Membre du Club Avatar de lesitadom39
    Homme Profil pro
    Retraité
    Inscrit en
    août 2015
    Messages
    94
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Jura (Franche Comté)

    Informations professionnelles :
    Activité : Retraité
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : août 2015
    Messages : 94
    Points : 67
    Points
    67
    Par défaut Afficher/masquer mot de passe dans un formulaire
    Bonjour,
    j'ai trouvé un code pour effectuer cette action:
    Code : 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
     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 HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    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 HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  2. #2
    Rédacteur
    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    6 384
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 70
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 6 384
    Points : 23 113
    Points
    23 113
    Billets dans le blog
    111
    Par défaut


    Un ID doit être unique dans la page web !

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

  3. #3
    Membre du Club Avatar de lesitadom39
    Homme Profil pro
    Retraité
    Inscrit en
    août 2015
    Messages
    94
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Jura (Franche Comté)

    Informations professionnelles :
    Activité : Retraité
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : août 2015
    Messages : 94
    Points : 67
    Points
    67
    Par défaut 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 : 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
     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);

  4. #4
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    ls solutions les plus simples sont souvent les meilleures :

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    x.type = (x.type === "password")? "text" : "password";
    est la syntaxe de l'"opérateur (ternaire) conditionnel", équivalent à :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
      if (x.type === "password") {
        x.type = "text";
      } else {
        x.type = "password";
      }
    Dernière modification par ProgElecT ; 10/10/2019 à 18h01.

  5. #5
    Rédacteur
    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    6 384
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 70
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 6 384
    Points : 23 113
    Points
    23 113
    Billets dans le blog
    111
    Par défaut
    Exemple n'utilisant pas des ID pour les inputs password :

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    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 JavaScript : 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
    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
    });

  6. #6
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    3 576
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 3 576
    Points : 4 885
    Points
    4 885
    Par défaut
    Oui, j'avais un peu ce genre d'idée:

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    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 javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    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)
    }

  7. #7
    Futur Membre du Club
    Homme Profil pro
    technicien
    Inscrit en
    novembre 2011
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : technicien
    Secteur : Distribution

    Informations forums :
    Inscription : novembre 2011
    Messages : 5
    Points : 6
    Points
    6
    Par défaut
    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
    <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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    <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

  8. #8
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 767
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 71
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 767
    Points : 64 618
    Points
    64 618
    Billets dans le blog
    1
    Par défaut
    oeuil
    Un œuf ou un œil ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 4
    Dernier message: 03/01/2011, 13h34
  2. Réponses: 4
    Dernier message: 19/09/2010, 10h57
  3. définir un login et mot de passe dans un formulaire
    Par atmar dans le forum VBA Access
    Réponses: 3
    Dernier message: 13/02/2008, 15h57
  4. Réponses: 4
    Dernier message: 18/04/2007, 17h46
  5. Mot de passe dans un formulaire
    Par Hayabusa dans le forum Langage
    Réponses: 2
    Dernier message: 02/07/2006, 15h06

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo