Bonjour !

J'ai une fonction... qui fonctionne, mais que j'aimerais améliorer.
Le but est d'avoir le comportement suivant :
- A l'arrivée sur un formulaire, certains inputs sont grisés (mais pas désactivés) et contiennent la description de ce qu'ils devront contenir (en l'occurence, "Nom" et "Prénom").
- Lorsque le focus et donné à un de ces input, le contenu s'efface, l'input n'est plus grisé et l'utilisateur peut écrire dans l'input de façon normale
- Si rien n'a été saisi et que le focus est perdu, l'input redevient grisé, et la description du contenu s'affiche de nouveau

Pour le moment, j'ai procédé de cette manière:
Coté HTML:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
 
<style type='text/css'>
	input.labeled{
		color: grey;
		font-style: italic;
	}
</style>
<label for='entreprise'>Entreprise</label>
<input type='text' id='entreprise' name='entreprise' />
<br />
<input type='text' name='nom' value='Nom' onfocus='labeled_input(this);' />
<input type='text' name='prenom' value='Prénom' onfocus='labeled_input(this);' />
Coté JS:
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
function labeled_input(input){
	if(input && input.className == 'labeled'){
 
		if(input.value == 'Nom')
		{
			input.onblur = function(){
				if(this.value == '')
				{
					this.className = 'labeled';
					this.value = "Nom";
				}
			};
		}
		else if(input.value == 'Prénom')
		{
			input.onblur = function(){
				if(this.value == '')
				{
					this.className = 'labeled';
					this.value = "Prénom";
				}
			};
		}
		input.value = '';
		input.className = '';
	}
}
Cela fonctionne, mais uniquement pour des champs qui contiendraient "Prénom" ou "Nom".
En gros, c'est cette partie qui me dérange
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
		if(input.value == 'Nom')
		{
			input.onblur = function(){
				if(this.value == '')
				{
					this.className = 'labeled';
					this.value = "Nom";
				}
			};
		}
		else if(input.value == 'Prénom')
		{
			input.onblur = function(){
				if(this.value == '')
				{
					this.className = 'labeled';
					this.value = "Prénom";
				}
			};
		}
Je voudrais "tout simplement" pouvoir faire varier la chaine "Prénom" ou "Nom" en fonction du contenu de l'input (histoire de ne pas avoir à répéter l'assignation de l'événement pour chaque différente valeur possible).

Si ce n'est pas clair, n'hésitez pas à demander plus d'infos

Merci d'avance !