Afficher et cacher en jquery
Résolu
mathieu
-
mathieu -
mathieu -
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
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
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
A voir également:
- Afficher cacher mot de passe
- Trousseau mot de passe iphone - Guide
- Mot de passe - Guide
- Mot de passe administrateur - Guide
- Mot de passe bios perdu - Guide
- Voir mot de passe wifi android - Guide
3 réponses
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 :
Et dans ton code tu cibles l'élément avec l'id "password"
Normal donc que ça ne marche pas...
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...
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
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
le tout ensemble...
(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");
}
}
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) ; }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 ;)
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....
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 ;)