Simplification d'une fonction - gestion des événements
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:
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:
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:
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 !
