Changer un input type="text" en type="password" + le vider

Version imprimable

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:
Code:

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\';}" />
(les guillemets simple sont échappé car dans un echo ''; )

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?

solution sommaire:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<form id="formu" action="">
 
	<div>
		<input type="text" name="pseudo" id="pseudo" value="pseudo" />
	</div>
 
	<div>
		<input type="text" name="standby" id="standby" value="mot de passe" />
		<input type="password" name="mdp" id="mdp" style="display:none" />
	</div>
 
</form>
 
<script type="text/javascript">
 
var f=document.getElementById("formu").elements;
 
 
f["standby"].onfocus=function(){
	this.style.display="none";
	f["mdp"].style.display="inline";
	f["mdp"].focus();
}
 
f["mdp"].onblur=function(){
	if(!this.value){
		this.style.display="none";
		f["standby"].style.display="inline";
	}
}
 
 
</script>

salut,

solution en utilisant que deux champs et en modifiant le type comme tu voulais faire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<html>
	<head>
		<title></title>
		<script type="text/javascript">
			<!--
			function vider() {
				document.getElementById('pseudo').value='';
				document.getElementById('password').value='';
				document.getElementById('password').type='password';
			}
			function reinitialiser()
			{
				if(document.getElementById('pseudo').value == '')
				{
					document.getElementById('pseudo').value='Pseudo';
					document.getElementById('password').type='text';
					document.getElementById('password').value='Mot de passe';
				}
			}
 
			-->
		</script>
	</head>
	<body>
		<input type="text" id="pseudo" value="Pseudo" onclick="vider()" onblur="reinitialiser()" />
		<input type="text" id="password" value="Mot de passe" />
	</body>
</html>

03/01/2008, 13h49
javatwister

non, tu as mal compris: IE n'admet pas le changement de type quand un "password" est impliqué (ce qui démontre la grande rigueur de ce navigateur) :)

Aya !!
Vraiment désolé, faut dire qu'il y avait trop a lire aussi ! (...) Bon ok j'ai répondu un peu vite... pour me faire pardonner je mets une autre solution "possible".

En gros on entoure le champ password d'une <div> et on change l'innerHTML pour mettre le champ avec le bon type. L'intéret est d'avoir un champ de meme id qu'il soit de type text ou password. Enfin voici le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<html>
	<head>
		<title></title>
		<script type="text/javascript">
			<!--
			function vider() {
				document.getElementById('pseudo').value='';
				// pour FF
				//document.getElementById('password').value='';
				//document.getElementById('password').type='password';
				// pour IE
				document.getElementById('div1').innerHTML = '<input type="password" id="password" value="" />';
 
			}
			function reinitialiser()
			{
				if(document.getElementById('pseudo').value == '')
				{
					document.getElementById('pseudo').value='Pseudo';
					//document.getElementById('password').type='text';
					//document.getElementById('password').value='Mot de passe';
					document.getElementById('div1').innerHTML = '<input type="text" id="password" value="Mot de passe" />';
				}
			}
 
			-->
		</script>
	</head>
	<body>
		<input type="text" id="pseudo"   value="Pseudo" onclick="vider()" onblur="reinitialiser()" />
		<div id="div1">
			<input type="text" id="password" value="Mot de passe" />
		</div>
</body>
</html>