Changer le type Input et le contenu Button

Bonjour,

Je reviens vers ce sujet clos.

Je préfère la solution en javascript pur et avec le button dans l'input.

Mon problème est non seulement de gérer le changement de type mais aussi le changement de contenu du button.

button Afficher si type=password
button Masquer si type=text

Comme je suis assez nul en javascript je ne vois pas bien comment faire.

Merci d'avance.

Bonjour,

J'ai deux problèmes en plus.

Avec cette structure :

<tr><th><label for="pass">Mot de passe *</label></th><td><input type="password" name="pass" id="pass" value=""  /></td></tr>
<tr ><td></td><td><button title="voir-cacher">Afficher</button> (interdiction de &gt;, &lt;, &amp; et &quot;)</td></tr>

1) Je n'arrive pas à cibler l'input pour le changement de type.

2) Un click sur button provoque la soumission du formulaire comme si c'était un submit.

Je précise que j'utilise ce javascript en sachant que le ciblage est mauvais :

document.querySelector ("button").addEventListener ("click", function ()
{
this.parentNode.querySelector("input").type = (this.parentNode.querySelector("input").type == "text") ? "password" : "text";
}, false);

Modifié par boteha_2 (31 Aug 2019 - 15:52)

Bonjour,

En utilisant document.getElementById que je connais, en utilisant input type=button au lieu de button, j'ai un script qui fonctionne.

<tr><th><label for="pass">Mot de passe *</label></th><td><input type="password" name="pass" id="pass" value=""  /></td></tr>
<tr ><td></td><td><input id="am" type="button" title="Afficher le mot de passe" value="Afficher" /> (signes interdits&nbsp;: &gt; &lt; &quot; &#039; &amp;)</td></tr>

Et cette fonction :

document.getElementById ("am").addEventListener ("click", function ()
{
if (document.getElementById("pass").type == "text")
{
document.getElementById ("pass").type = "password";
document.getElementById ("am").value = "Afficher";
document.getElementById ("am").title = "Afficher le mot de passe";
}
else
{
document.getElementById ("pass").type = "text";
document.getElementById ("am").value = "Masquer";
document.getElementById ("am").title = "Masquer le mot de passe";
}
}, false);

Si vous avez des idées d'amélioration merci d'avance.