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