champs : blur et focus

**SeThYy** · 07/07/2009, 11h41

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 :

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

**danielhagnoul** · 07/07/2009, 20h21

Bonsoir.

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

**SeThYy** · 07/07/2009, 22h49

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 ?

**danielhagnoul** · 08/07/2009, 00h08

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
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"
        });
    }
});

**SeThYy** · 08/07/2009, 00h09

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...)

**danielhagnoul** · 08/07/2009, 09h06

Bonjour.

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

Voici un meilleur exemple :

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

champs : blur et focus

jQuery

Vue hybride

Discussions similaires

Partager

Partager