champs : blur et focus

Version imprimable

Bonjour,

Je vous explique mon problème : j'essaie de créé un système de champs qui se remplissent automatiquement, si le visiteur n'a pas renseigné le champ (comme sur la page d'identification facebook).

Etant donné que le principe est assez compliqué à expliquer, voici un lien de mon script jquery en action : http://blaackroom.com/pb_champs/

Il y a un petit problème, pour le champs Mot de passe : quand on clique sur celui-ci, le texte par défaut s'efface, et on peut écrire quelque chose ; seulement voila, si l'on écrit rien, le texte par défaut ne se remet pas, alors que je l'ai bien précisé dans mon code !

Le voici :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Champs</title>
<style type="text/css">
.champ {
 
	border: none;
	background: #D2F0FF;
	width: 300px;
	padding: 2px;
	color: #aaaaaa;
	font-style: italic;
	font-size: 13px;
	font-weight: bold;
	font-family: Arial;
}
</style>
<script language="javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
 
	$(document).ready(function(){
 
		$("#identifiant").blur(function () {
			if (this.value == "") {
				this.value='Identifiant';
				$("#identifiant").css({ color: "#aaa", "font-style": "italic" });
			}
		});
		$("#identifiant").focus(function () {
			if (this.value == "Identifiant") {
				this.value='';
				$("#identifiant").css({ color: "#67BFE1", "font-style": "normal" });
			}
		});
		$("#pass").blur(function () {
			if (this.value == "") {
				$("#passcontain").replaceWith('<input type="text" name="pass" id="pass" class="champ" value="Mot de passe" />');
				$('#pass').blur();
				$("#pass").css({ color: "#aaa", "font-style": "italic" });
			}
		});
		$("#pass").focus(function () {
			if (this.value == "Mot de passe") {
				$("#passcontain").replaceWith('<input type="password" name="pass" id="pass" class="champ" value="" />');
				$('#pass').focus();
				$("#pass").css({ color: "#67BFE1", "font-style": "normal" });
			}
		});
	});
</script>
</head>
 
<body>
<form name="form1" id="form1" method="post" action="#">
 
	<p><input type="text" id="identifiant" class="champ" value="Identifiant" /></p>
 
    <div id="passcontain">
		<input type="text" id="pass" class="champ" value="Mot de passe" />
    </div>
</form>
</body>
</html>

Merci d'avance pour votre aide!

SeTh

Bonsoir.

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Champs</title>
<style type="text/css">
.champ {
 
	border: none;
	background: #D2F0FF;
	width: 300px;
	padding: 2px;
	color: #aaaaaa;
	font-style: italic;
	font-size: 13px;
	font-weight: bold;
	font-family: Arial;
}
</style>
<script language="javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){	
		$("#identifiant").hover(
			function () {
				if ($(this).val() == "Identifiant") {
					$(this).val('');
					$(this).css({
						color: "#67BFE1",
						fontStyle: "normal"
					});
				}
			}, 
			function () {
				if ($(this).val() == "") {
					$(this).val('Identifiant');
					$(this).css({
						color: "#aaaaaa",
						fontStyle: "italic"
					});
				}
			}
		);
 
		$("#pass").hover(
				function () {
					if ($(this).val() == "Mot de passe") {
						$(this).val('');
						$(this).css({
							color: "#67BFE1",
							fontStyle: "normal"
						});
					}
				}, 
				function () {
					if ($(this).val() == "") {
						$(this).val('Mot de passe');
						$(this).css({
							color: "#aaaaaa",
							fontStyle: "italic"
						});
					}
				}
			);
	});
</script>
</head>
 
<body>
	<form name="form1" id="form1" method="post" action="#">
		<p>
			<input type="text" id="identifiant" class="champ" value="Identifiant" />
		</p>
    <div id="passcontain">
			<input type="text" id="pass" class="champ" value="Mot de passe" />
    </div>
	</form>
</body>
</html>

07/07/2009, 22h49
SeThYy

merci de ta réponse si rapide ! le probleme, c'est que je souhaite ques les opérations s'effectuent lors d'un clic... j'ai remplacé les deux "hover" par "click", mais le truc c'est que au début ca marche, mais ca ne me remet pas le texte par défaut... Tu vois ce que je veux dire ?

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
37
 
$("#identifiant").blur(function () {
    if ($(this).val() == "") {
        $(this).val('Identifiant');
        $(this).css({
            color: "#aaaaaa",
            fontStyle: "italic"
        });
    }
});
$("#identifiant").focus(function () {
    if ($(this).val() == "Identifiant") {
        $(this).val('');
        $(this).css({
            color: "#67BFE1",
            fontStyle: "normal"
        });
    }
});
$("#pass").blur(function () {
    if ($(this).val() == "") {
        $(this).val('Mot de passe');
        $(this).css({
            color: "#aaaaaa",
            fontStyle: "italic"
        });
    }
});
$("#pass").focus(function () {
    if ($(this).val() == "Mot de passe") {
        $(this).val('');
        $(this).css({
            color: "#67BFE1",
            fontStyle: "normal"
        });
    }
});

08/07/2009, 00h09
SeThYy

Merci, mais le problème c'est que maintenant le champ mot de passe est clair... (il n'est pas crypté lorsqu'on tape quelque chose...)

Bonjour.

Désolé pour cette perte de temps, je me suis tellement focalisé sur l'animation que j'ai oublié le reste, le principal ! :oops:

Voici un meilleur exemple :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Champs</title>
<style type="text/css">
.champ {
 
	border: none;
	background: #D2F0FF;
	width: 300px;
	padding: 2px;
	color: #aaaaaa;
	font-style: italic;
	font-size: 13px;
	font-weight: bold;
	font-family: Arial;
}
</style>
<script language="javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
 
	$(document).ready(function(){
 
		$("#identifiant").blur(function () {
			if (this.value == "") {
				this.value='Identifiant';
				$("#identifiant").css({ color: "#aaa", "font-style": "italic" });
			}
		});
		$("#identifiant").focus(function () {
			if (this.value == "Identifiant") {
				this.value='';
				$("#identifiant").css({ color: "#67BFE1", "font-style": "normal" });
			}
		});
 
		$("#pass1").focus(function () {
				if ($(this).val() == "Mot de passe") {
						$(this).val('');
						$(this).css({
								color: "#67BFE1",
								fontStyle: "normal",
								display: "none"
						});
 
						$("#pass2").css("display","block");
						$("#pass2").focus();
				}
		});		
 
 
		$("#pass2").blur(function () {
				if ($(this).val() == "") {
						$(this).css("display","none");
 
						$("#pass1").val('Mot de passe');
						$("#pass1").css({
								color: "#aaaaaa",
								fontStyle: "italic",
								display: "block"
						});
						$("#pass1").blur();
				}
		});
 
	});
</script>
</head>
 
<body>
<form name="form1" id="form1" method="post" action="#">
 
	<p><input type="text" id="identifiant" class="champ" value="Identifiant" /></p>
 
    <div id="passcontain">
			<input type="text" id="pass1" class="champ" style="display:block;" value="Mot de passe" />
			<input type="password" id="pass2" class="champ" style="display:none;" value="" />
    </div>
</form>
</body>
</html>

08/07/2009, 09h46
SeThYy

cooool c'est parfait merciiiiiii ! résolu!!