Bonjour, j'essais de faire un formulaire de connexion joli:
un champs login et un champs mot de passe simple.
J'aimerais que "Pseudo" soit affiché dans l'input du pseudo, et "Mot de passe" dans l'input du mot de passe et que lorsque l'on clic pour entrer son propre pseudo, le champs se vide, et si on entre rien et que l'on enleve le focus sur le champs, Pseudo, ou Mot de passe reviennes.
Le premier problème qui s'est posé c'est que si je laissais en input type="password", au lieu de m'afficher "Mot de passe", il m'afficher "************".
Donc j'ai du mettre dans le html le mot de passe en input type="text" et changer le type une fois que l'on focus le champs Mot de passe.
Voici le résultat:
(les guillemets simple sont échappé car dans un echo ''; )
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3 <input type="text" name="pseudo" value="Pseudo" onFocus="javascript:if(this.value==\'Pseudo\')this.value=\'\';" onBlur="javascript:if(this.value==\'\')this.value=\'Pseudo\';" /> <input type="text" name="password" value="Mot de passe" onFocus="javascript:if(this.value==\'Mot de passe\'){this.type=\'password\'; this.value=\'\';}" onBlur="javascript:if(this.value==\'\'){this.type=\'text\'; this.value=\'Mot de passe\';}" />
Sa marches magnifiquement bien sous Firefox, mais sous IE:
le champs pseudo marches parfaitement, mais le champs Mot de passe ne passes ni en type="password", et ne se vides pas non plus!
J'ai donc essayer en activant que le vidage: sa marches mais le mot de passe s'affiches en toutes lettres, sécurité zéro.
J'ai essayer en activant que le changement de "type", là, même le changement de type seul ne marches pas.
Le changement de type est impossible sous IE?
Une solution pour détourner ce problème?
Une idée?
J'ai essayer plusieurs alternative, tel que passer par du CSS avec la propriété :focus , en mettant les textes en images qui serais les background des input, mais cette fonction aussi... ne marches pas sous IE.
J'ai donc essayer de contourner: mettre un style="background-image:url('images/pseudo.gif'); onFocus:"javascript:this.style='background-image:none;';" mais ça, même sous FF ça ne marches pas.
Dernière idée:
je reste sur la premiere solution pour le pseudo.
pour le mot de passe: je rajoutes un champs hidden que l'on nomeras ici "recupMdp":
Lorsque l'utilisateur entres un caractère dans le champs motdepasse, je rajoutes une petite astérisque au champs motdepasse qui sera en texte, et je rajoutes le caractere entrée par l'utilisateur dans le champs hidden.
cependant là c'est un peu compliqué pour moi, pourriez-vous m'aider à essayer dans cette voie?
Partager