Discussion :

[surfsilver]

Bonjour,

Nouvel inscrit sur le site, je me permet de déposer ma première demande d'aide.

Ne maitrisant pas du tout javascript je cherche le moyen de pouvoir basculer un
champ *password* d'une chaine cachée (*********) à quelque chose de
compréhensible (mon_passe) et faire l'inverse.

Si un contributeur à une solution je suis preneur. Dans tout les cas je continue
à cherche.

Bien cordialement.

[SpaceFrog]

as tu essayé de modifier le type du champs ?

[surfsilver]

Bonjour,

En fait, je n'avais pas pensé à cette solution, je vais tester pour voir ce que
cela donne.

Dans un sens sa pourrait m'éviter de faire un système de cacher/montrer un div
avec le champ voulu (solution assez voir très sale je trouve).

Je test et dirais ensuite ce que cela vaut.

Cordialement.

[surfsilver]

en continuant sur ma lancé, j'ai appliqué le code suivant :

<input type=\"button\" value=\"Voir le MdP\" onclick=\"this.form_name.type_input.type='text'\" />

ou :
- form_name est le nom du formulaire
et
- type_input le type du champ : en l'occurrence 'password' vers 'text'

Lorsque je l'applique il ne fonctionne mais ma console d'erreur m'indique une
erreur de sécurité.

Ce dernier ce trouve dans un bloc PHP donc son écriture est normal.

[SpaceFrog]

A priori ça ne passe pas ...

donc :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<input type="password" id='pass' style="display:block" />
<input type='text' id='notpass' style="display:none"/>
 
<input type='button' onclick="document.getElementById('notpass').value=document.getElementById('pass').value;document.getElementById('pass').style.display='none';document.getElementById('notpass').style.display='block';" value="show" />

[surfsilver]

Merci pour ton code SpaceFrog.

Comme dis dans un de postes précédent, je n'envisageai pas trop ce type de
solution (équivalente en soit au <div></div>) mais après plusieurs heure de
recherche (ce matin 9.00) je pense abdiquer pour sa.

Ceci dit je continue à chercher une solution et posterai mon résultat final (si je
trouve) en tant que contribution.

Cordialement.

[surfsilver]

Comme dit, je donne ma solution pour cette gestion d'affichage des mots de
passe.

Le code que j'exploite est le suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<input type="password" id="type" value="test" />
<span onclick="$('type').type='text';return false;">Afficher</span> -
<span onclick="$('type').type='password';return false;">Cacher</span>

Maintenant il ne me reste plus qu'à mettre tout cela sous forme de fonction
avec une assignation par variable afin que le tout soit réutilisable n'importe ou.

Et encore merci à SpaceFrog pour le coup de main.

Je clôturai le sujet lorsque tout sera fonctionnel et que j'aurai mis les codes
finaux.

Cordialement.

[surfsilver]

Donc comme promis voici la solution complète à mon problème.

Je vous poste mon code, prévu pour fonctionné sous prototype.
À vous ensuite d'adapter vos besoins.

Dans le PHP

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<?php
        echo '<tr><th>'._("Mot de passe").'</th>';
        // -- CHAMP EN COURS DE MOFICATION --------------------------------
        echo '<td><input type="password" id="camera_password" value="'.htmlspecialchars($camera[password]).'" />';
        echo ' <span id="camera_password_btn" class="smalllink" onclick="afficherCacher(\'camera_password\');" style="white-space:nowrap;">'._("Afficher").'</span>';
        echo '</td></tr>';
?>

Dans le JS

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
19
 
/** Afficher/Cacher les mots de passe **/
function afficherCacher(idInput) {
    // $ = document.getElementById
    // Plus d'information sur http://www.prototypejs.org/api/utility#method-$
    if (typeof $(idInput)=='undefined') return false;
    if ($(idInput).type=='password') {
        $(idInput).type='text';
 
        if (typeof $(idInput + '_btn')=='undefined') return false;
        $(idInput + '_btn').innerHTML='Cacher';
    }
    else
    {
        $(idInput).type='password';
        if (typeof $(idInput + '_btn')=='undefined') return false;
        $(idInput + '_btn').innerHTML='Afficher';
    }
}

Pour plus de commentaire, n'hésitez pas.