Discussion :

[tavarlindar]

Bonjour,

Comment utiliser les CSS sur un onBlur et OnFocus ?

Voilà j'ai un champ définit comme suit dans un tableau :

Code :

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

1
2
 
<input class ='tab_input_nombre_monnetaire' type='text' id='montant_vente0'name='montant_vente0' size='15' value='0' onFocus="this.className='focus';" onBlur="this.className='normal_monetaire';" >

avec une définition CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
.focus_monetaire {	/*** Mise en avant des champs en cours d'utilisation ***/
	background: #ECF0FF;
	color: black;
}
 
.normal_monetaire {	/*** Retour à l'état normal après l'utilisation ***/
	background: white;
	color: black;
	text-align:right;
	}

Le tableau étant dynamique, on peut rajouter des lignes.
Lorsqu'on rajoute des lignes , j'ai un code JS du type

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
 
var champPrix_vente = document.createElement('input');
 
	champPrix_vente.setAttribute('type','text');
	champPrix_vente.setAttribute('size','15');
	champPrix_vente.setAttribute('name','prix_vente');
	champPrix_vente.setAttribute('value','');
	champPrix_vente.setAttribute('id','');
	champPrix_vente.className='tab_input_nombre_monnetaire';
 
//champPrix_vente.onFocus = function() {this.className='focus_monetaire';};
	//champPrix_vente.onFocus = function() {this.className=props.ClassFocus;};
 
	//champPrix_vente.onFocus.className='focus';
	//champPrix_vente.onBlur.className='normal_monetaire';
 
 
	newCell2.appendChild(champPrix_vente);

Je ne vois pas comment définir les onFocus et OnBlur. Après recherche, il semblerait que je dois définir une fonction, mais je ne vois pas comment.

Par avance merci pour votre aide

[E.Bzz]

Bonjour,
il faudrait peut être déjà que les noms des class que tu appliques via JS correspondent à celles que tu as définies en CSS

Sinon, la syntaxe semble bonne ...

A+

[SpaceFrog]

il n'existe pas de pseudo class onblur ni onfocus en css ...


la seul chose qui s'en rapproche serait hover mais exclusivement pour les balises <a> de façon crossbrowser...

tu peux l'emuler cependant en changeant de className sur le onmouseover/onmouseout pour le hover et sur le onfocus onblur pour le focus ... ...

[tavarlindar]

Bonjour,
il faudrait peut être déjà que les noms des class que tu appliques via JS correspondent à celles que tu as définies en CSS

Sinon, la syntaxe semble bonne ...

Tout d'abord, merci pour la réponse, mais désolé, je ne l'ai pas comprise ...

[E.Bzz]

mais désolé, je ne l'ai pas comprise ...

Ah

A moins que tu ne nous ais pas donné tout le code, les classes "focus" et "tab_input_nombre_monnetaire" n'existent pas ...

A+

[tavarlindar]

Code :

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

1
2
3
4
5
6
7
 
il n'existe pas de pseudo class onblur ni onfocus en css ...
 
 
la seul chose qui s'en rapproche serait hover mais exclusivement pour les balises <a> de façon crossbrowser...
 
tu peux l'emuler cependant en changeant de className sur le onmouseover/onmouseout pour le hover et sur le onfocus onblur pour le focus ... ...

Merci, je suis pourtant bien réveillé, mais c'est du chinois.

[DoubleU]

Code :

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

champPrix_vente.onfocus = function() {this.className='focus_monetaire';};

Attention, pas de F majuscule sur onFocus...

[E.Bzz]

Merci, je suis pourtant bien réveillé, mais c'est du chinois.

Je pense que SpaceFrog n'avait pas vu tes

Code :

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

onFocus="this.className='focus';" onBlur="this.className='normal_monetaire';"

en fin de tag, et il t'orientait justement dans ce sens

A+

[tavarlindar]

E.Bzz,

Tous les class CSS existent en fait.

J'ai essayé :

champPrix_vente.onFocus = function() {this.className='focus_monetaire';};

mais ce ne fonctionne pas

[E.Bzz]

Code :

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

champPrix_vente.onfocus = function() {this.className='focus_monetaire';};

Attention, pas de F majuscule sur onFocus...

C'est en commentaire, mais effectivement

[SpaceFrog]

Arf oui je n'avais pas vu les onfucus etc ...
:red:

sans MAJUSCULE onfocus ......

[E.Bzz]

Tous les class CSS existent en fait.

Comme il n'y a, à ma connaissance, pas de devin dans l'équipe, ça serait pas mal de donner (du premier coup) toutes les données du problème

Bon courage ...

[tavarlindar]

Un Très grand merci à E.Bzz,SpaceFrog et DoubleU !
Effectivement mon F majuscule de onFocus provoquait l'erreur.

Voici donc le code :

Code :

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

1
2
3
 
	champPrix_vente.onfocus = function() {this.className='focus_monetaire';};
	champPrix_vente.onblur = function() {this.className='normal_monetaire';};

Encore Merci, car sans vous j'allais m'embarquais dans un truc compliqué pour rien.
Merci encore.

Bien à vous
Tavar.

[SpaceFrog]

et vive les galettes Normandes