Sujet Précédent Sujet Suivant

Afficher et cacher en jquery

Résolu/Fermé
mathieu - 25 févr. 2019 à 20:58
 mathieu - 27 févr. 2019 à 13:42
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

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
25 févr. 2019 à 21:23
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...


0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
25 févr. 2019 à 21:28
Et ton code un peu plus "beau" (et corrigé) 
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) ;
}
0
mathieu
26 févr. 2019 à 17:53
j'ai changer mon id , et j'avais complètement oublier de changer sur le code js

mais après comment je doit le mettre mon if et else afin d'afficher soit

icon-connexion-input-afficher-mdp:before (pour afficher le mot de passe)

icon-connexion-input-masquer-mdp:before (pour masquer le mot de pass


je sai s pas si c'est mieux en jquery ou js pour ce code ;)
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650 > mathieu
26 févr. 2019 à 18:03
tu peux faire un effort dans tes explications ????
afin d'afficher soit

icon-connexion-input-afficher-mdp:before (pour afficher le mot de passe)

icon-connexion-input-masquer-mdp:before (pour masquer le mot de pass

Ce que tu montres sembe être des class CSS..... donc tu ne les "affiches" pas....

Il faudrait expliquer Clairement et en détail ce que tu souhaites faire et nous fournir le code html/css qui va avec.


Pour ce qui est d'utiliser jquery ou non... ben... ça dépend de tes besoins.
Pour l'instant... du simple JS semble suffisant....
0
mathieu
26 févr. 2019 à 21:47
si je met if et else

afin dire affiche icon-afficher-mdp (par défault)

et des qu'on clique sur icon-afficher-mdp
ca me changera mon icon par

icon-masquer-mdp


peut -être dans le code html c'est de faire en sorte que l'icon change après avoir cliquer

l'icon par défault
if ('icon-afficher-mdp')

et ensuite ce icon des qu'on clique
else ('icon-masquer-mdp')



à mon avie

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

else

if ("<span class="icon-masquer-mdp" onclick=toto()></span>"


c'est juste une idée ;)
0
Réponse 2 / 3
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
Modifié le 26 févr. 2019 à 22:22
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");
  }

}
0
Réponse 3 / 3
mathieu
27 févr. 2019 à 13:42
merci pour ton aide et tes liens, j vais etudier ca plus prèts ;)
0

Discussions similaires

programme qui n'affiche pas le mot secret
EMy.chev -
yg_be -

3 réponses
Afficher toutes les lignes masquées excel
livlarsen -
esicom -

26 réponses
Cacher les membres du groupe WhatsApp
RegimeSevaire -
NADhair -

3 réponses
Cellules en surbrillance selon une TextBox
Wyrgle -
jordane45 -

1 réponse