afficher et cacher en jquery Résolu/Fermé

Question

Bonjour, 

j'ai 2 icons
icon-connexion-input-afficher-mdp
et
icon-connexion-input-cacher-mdp

j'aimerais afficher et cacher un mot de pass
<input type="password" placeholder="enter password" id="connexion-password" />

et j'ai fait un code 

     function toto()
          {
          mdp = document.getElementById('password');
          theType = mdp.getAttribute('type');
          if ( theType == 'password' )
               mdp.setAttribute('type', 'text') ;
          else
               mdp.setAttribute('type', 'password') ;
          }


quand je cliques , il ne veux pas m'afficher le mot de pass


si quelqu'un à une idée afin d'afficher le mot de passe 

en changeant l'icon afficher ou masquer soi t l'un ou l'autre

a sera gentil de votre aide






Configuration: Windows / Chrome 72.0.3626.119

jordane45 · Answer

Bonjour,

1 - Ta question concernant le Javascript... il faut poster dans le forum Javascript !  (je déplace le sujet au bon endroit )

2 - Tu parles de jquery... mais il n'y a pas de jquery dans le code que tu nous montres

3 - Ton input a l' id :  id="connexion-password" 
Et dans ton code tu cibles l'élément avec l'id "password"

document.getElementById('password');

Normal donc que ça ne marche pas...

jordane45 · Answer

Donc... en gros... ce que tu veux maintenant c'est de pouvoir modifier la class dans ton champ SPAN ?
(c'est plus clair écrit comme ça non ?? )

Donc tu peux utiliser cette fonction pour savoir si ton élément contient la class voulue ou non

function hasClass(element, className) {
    return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
}

Ensuite, pour retirer une class
https://www.w3schools.com/howto/howto_js_remove_class.asp

Pour en mettre une :
https://www.w3schools.com/howto/howto_js_add_class.asp

Et pour manipuler plus facilement ton span.. l'idéal serait de lui mettre un ID

<span class="icon-afficher-mdp" onclick="toto()"  id="btn-mdp"></span>

le tout ensemble...

function hasClass(element, className) {
    return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
}

function toto() {
  var mdp = document.getElementById('connexion-password');  
  var type = mdp.getAttribute('type') == 'password' ?'text' :'password'; // écriture ternaire (sorte de IF/ELSE)
  mdp.setAttribute('type', type) ;

  var btn = document.getElementById('btn-mdp');
  if( hasClass(btn ,'icon-afficher-mdp')){
    btn.classList.remove("icon-afficher-mdp");
    btn.classList.add("icon-masquer-mdp");
  }else{
    btn.classList.remove("icon-masquer-mdp");
    btn.classList.add("icon-afficher-mdp");
  }

}

mathieu · Answer

merci pour ton aide et tes liens, j vais etudier ca plus prèts ;)

Afficher et cacher en jquery

3 réponses

Discussions similaires