Discussion :

[superpigeon]

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 !

[E.Bzz]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
input.onblur = function(){
			if(this.value == '')
			{
				this.className = 'labeled';
				this.value = input.value;
			}
};

Non ?

A+

[superpigeon]

C'est ce que j'avais pensé, mais non.
Car dans

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
input.onblur = function(){
	if(this.value == '')
	{
		this.className = 'labeled';
		this.value = input.value;
	}
};

input est pris dans le référentiel de la fonction.
Donc quand ma fonction sera appelée input, ne signifiera plus rien (ce n'est pas une variable globale).

[E.Bzz]

Ah ouais !
Pas fais attention

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
input.onblur = function(){
			if(this.value == '')
			{
				this.className = 'labeled';
				this.value = (this.name=='nom')?'Nom':'Prénom';
			}
};

A+

[superpigeon]

Oui j'y avais pensé aussi d'utiliser l'attribut name.
Le souci, c'est que dans ce cas, je ne peux toujours utiliser mon script que pour "Prénom" ou "Nom".
Bon, on peut toujours ajouter d'autres conditions pour d'autres valeurs, mais ça fonctionnera toujours pour une quantité finie de valeur.
Et plus j'ajouterai de cas plus mon code sera lourd et laid.

C'est quand même étrange, on est dans la fonction labeled_input, on a la valeur qu'on veut sous la main, mais on ne peut pas l'utiliser.

Il doit bien y avoir un moyen...

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.value = this.className;

[E.Bzz]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.value = this.className;

Oui, (avec = this.name en fait ) j'y ai pensé.

Mais on perd la majuscule et l'accent

Sauf si on passe tout en majuscule ...

A+

[Bovino]

Un nom de classe peut prendre une majuscule, reste juste à adapter le code... en revanche, pour les accents, c'est effectivement problématique !!!
Mais de toute façon, c'est bien à name que je pensais () et dans la mesure où le name n'est utilisé que pour stocker les valeurs par défaut, je ne pense pas que les accents posent problème... sinon, il y a aussi l'alternative d'un attribut title

[bigboomshakala]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type='text' name='nom' value='Nom' onfocus='labeled_input(this);' />

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
input.onblur = function(){
 if(this.value == '')
 {
	this.className = 'labeled';
	this.value = this.defaultValue;
}
};

[E.Bzz]

@BigBoom >
c'est ce que j'essayais de retrouver ...

A+

[Bovino]

demain, j'arrête la drogue !!!

[superpigeon]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type='text' name='nom' value='Nom' onfocus='labeled_input(this);' />

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
input.onblur = function(){
 if(this.value == '')
 {
	this.className = 'labeled';
	this.value = this.defaultValue;
}
};

Joli !

Nickel bravo et merci