événements : onfocus / onblur dans un textbox

Version imprimable

Bonjour,

J'ai un champ text dans lequel j'affiche par défaut la valeur "Rechercher".
A ce champ sont associés 2 événements onfocus et onblur :

- onfocus permettrais de d'effacer le contenu du champ pour permettre la saisie de l'utilisatuer

- onblur permettrais de réinitialiser la valeur du champ text par défaut dans le cas où le champ est vide.

La page étant chargée, un click dans le champ fait bien disparaitre le texte par défaut mais ne permet pas la saisie : le textbox ne semble pas actif ! :(

dans le fichier html :

Code:

<input type="text" name="search_field" id="search_field" value="Rechercher" class="search_field" onfocus="ActiveTextBox('search_field');" onblur="ResetTextBox('search_field');"/>

dans le fichier js
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function ActiveTextBox(BoxId) { txtBox = document.getElementById(BoxId); if(txtBox.value == txtBox.defaultValue) { txtBox.value = ""; } } function ResetTextBox(BoxId) { txtBox = document.getElementById(BoxId); if(txtBox.value=="") { return txtBox.value = txtBox.defaultValue; } //txtBox.style.color = "#333333"; //txtBox.value = ""; }
Merci d'avance

01/04/2008, 13h46
E.Bzz

Bonjour,
il vient d'où le defaultValue ?

:?

A+

Bonjour,
Tu peux faire comme ceci :

Code:

1
2
3
4
5
6
7
8
9
10
 
<script language="javascript" type="text/javascript">
function ResetTextBox()
 {
	if(document.form.search_field.value == "")
	{	
	document.form.search_field.value = "Rechercher" ;
	}
 }
</script>

Code:

1
2
3
4
 
<form name="form" method="get" action="">
<input type="text" name="search_field" id="search_field" value="Rechercher" class="search_field" onfocus="this.value=''" onblur="ResetTextBox();"/>
</form>

J'avoue que le defaultValue émane d'une inspiration personnel... :D
Je ne veux pas avoir à utiliser une valeur en particulier (comme tu le propose Jumano) afin de pouvoir utiliser ces 2 fonctions pour divers textbox qui contiendraient des valeurs initiales différentes.

Comme je suis en pleine débacle avec de l'AJAX (javascript/ASP) et que je me tors les neurones dans tous les sens, je viens de me rendre compte (vous n'y voyez peut être aucun rapport mais faites moi confiance!) que ce defaultValue peut être remplacé par un argument de plus dans mes 2 fonctions contenant le texte initial (soit mon fameux defaultValue)... pour répondre à ta très juste question E.Bzz Du coup, il devient utilisable pour tous mes textbox ! :D

Ainsi :

Code:

<input type="text" name="search_field" id="search_field" value="Rechercher" class="search_field" onfocus="ActiveTextBox('search_field','Rechercher');" onblur="ResetTextBox('search_field','Rechercher');"/>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function ActiveTextBox(BoxId,txtIdent) { txtBox = document.getElementById(BoxId); if(txtBox.value == txtIdent) { txtBox.value = ""; } } function ResetTextBox(BoxId,txtIdent) { txtBox = document.getElementById(BoxId); if(txtBox.value=="") { return txtBox.value = txtIdent; } }
Mais ça ne résoud pas mon problème de textbox inactif quand "onfocus" et dans lequel on ne peut donc rien rentrer...

:aie: AJAX = Gros Bobos :aie:

01/04/2008, 16h28
E.Bzz

Citation:

Envoyé par polothentik

textbox inactif quand "onfocus" et dans lequel on ne peut donc rien rentrer...

C'est à dire ?
Rien dans ton code ne rend ce champ inactif ... :?

Que contient la class ?

A+

Je charge la page : - "Rechercher" est visible dans le textbox

Je clique sur le textbox : - "Rechercher" disparait / Aucune saisie n'est possible

Je clique en dehors du textbox: -"Rechercher" est de nouveau visible

La classe css est la suivante:
Code:

1 2 3 4 5 6 7 8 9 10 11 #browser input.search_field { width: 226px; background-color: #FFFFFF; font-family: Arial; font-size: 13px; color: #666666; border: 0; position: absolute; top: 17px; left: 660px; }

01/04/2008, 16h48
E.Bzz

8O

Fonctionne nickel sous IE 6 et FF2 ...

:?

A+
01/04/2008, 16h49
polothentik

tu veux dire que ça marche chez toi ????
01/04/2008, 16h51
E.Bzz

Ben oui : testé à l'instant ...
Tu dois avoir autre chose dans ta page qui entre en conflit :?

A+
01/04/2008, 16h53
polothentik

J'ai rajouté une image sous mon textbox pour réaliser un cadre plus joli...

Est-ce qu'il est possible que ça pose problème ?
01/04/2008, 16h56
polothentik

C'est très étrange car quand j'actualise la page : rechercher disparait et je peux saisir du texte. Par contre si je reclique sur en dehors du champ ("Rechercher" apparait) puis reclique dans le champ ("Rechercher" disparait), la saisie et de nouveau impossibleb 8O8O
01/04/2008, 16h58
E.Bzz

Citation:

Envoyé par polothentik

J'ai rajouté une image sous mon textbox pour réaliser un cadre plus joli...

Est-ce qu'il est possible que ça pose problème ?

Citation:

Envoyé par polothentik

C'est très étrange car quand j'actualise la page : rechercher disparait et je peux saisir du texte. Par contre si je reclique sur en dehors du champ ("Rechercher" apparait) puis reclique dans le champ ("Rechercher" disparait), la saisie et de nouveau impossibleb 8O8O

On peut voir la page complète ?

A+
01/04/2008, 17h03
polothentik

Je viens de faire le test... il doit bien y avoir un conflit quelque part car quand je prend le champ à part, il fonctionne parfaitement bien comme tu me l'avais fait remarquer !!
01/04/2008, 17h12
polothentik

Le problème vient du contenu de ma page dont la feuille de style (CSS) est extrèmement pauvre mais qui passe dessous mon browser!
01/04/2008, 17h13
E.Bzz

Citation:

Envoyé par polothentik

Le problème vient du contenu de ma page dont la feuille de style (CSS) est extrèmement pauvre mais qui passe dessous mon browser!

8O :koi:

Tu peux préciser / formuler autrement :aie:

A+

A moins que
Code:

1 2 3 4 5 6 7 8 9 10 11 12 #browser input.search_field { width: 226px; background-color: #FFFFFF; font-family: Arial; font-size: 13px; color: #666666; border: 0; position: absolute; z-index : 999; top: 17px; left: 660px; }
résolve le problème (mais tu risques de le rencontrer avec d'autres éléments) ...

A+

01/04/2008, 17h21
polothentik

Ok, avant toute chose, ce n'est pas que je ne veuille pas poster ma page, c'est juste que le nombre de fichier qui y sont liés (CSS) est assez énorme... donc galère !

Les seules parties mobiles de ma page sont le contenu et le pied de page. Via l'utilisation de "z-index", mon contenu glisse sous mon entête et donc sous ma partie contenant le champ de recherche "Rechercher" (partie intitulée "browser"). Je pense que le problème vient du contenu puisque lorsque je le supprime, le champ textbox peut être saisi et les évènements sont bien pris en compte. D'autre part, mon pied de page, bien qu'ayant le même "z-index" que le contenu, bien que situé en dessous du contenu dans le fichier html, bien qu'étant positionné "absolute" avec "bottom", ne se situe pas sous le contenu :

Pour faire court, ce contenu me pose beaucoup de problème !!!

Citation:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
#browser input.search_field {
	width: 226px;
	background-color: #FFFFFF;
	font-family: Arial;
	font-size: 13px;
	color: #666666;
	border: 0;
	position: absolute;
        z-index : 999;
	top: 17px;
	left: 660px;
}

J'avais déjà essayé cette solution mais elle ne marche pas !

01/04/2008, 17h30
E.Bzz

Citation:

Envoyé par polothentik

Les seules parties mobiles de ma page sont le contenu et le pied de page. Via l'utilisation de "z-index", mon contenu glisse sous mon entête et donc sous ma partie contenant le champ de recherche "Rechercher" (partie intitulée "browser").

Quel sont les z-index :
de l'en-tête ?
du contenu ?
de l'input de recherche ?
du pied de page ?
Parce que ça :

Citation:

mon pied de page, bien qu'ayant le même "z-index" que le contenu,

risque de générer un comportement aléatoire.
Pour être au-dessus (à coup sûr), il faut une valeur z-index strictement supérieure ...

A+
01/04/2008, 17h34
polothentik

les z-index :

- header : 1
- navigation : 1
- browser : 1
- left_menu : 1
- content : 0
- footer : aucun
01/04/2008, 17h38
E.Bzz

Et avec
- header : 1
- navigation : 10
- browser : 1000
- left_menu : 10
- content : 100
- footer : 1

... puisqu'ici c'est browser le problème ...

EDIT : des valeurs égales sont acceptables pour les éléments qui ne se chevauchent jamais ...

A+
01/04/2008, 17h43
polothentik

Avec ça, le "content" passe sous le "browser" mais par-dessus tout le reste :
le champ n'est toujours pas saisissable, sauf si j'actualise la page : la saisie apparait. Mais après apparait le problème que j'ai exposé juste avant !!
01/04/2008, 17h46
polothentik

Une question qui pourrait peut etre solutionner le probleme: Est-il possible de limiter le defilement du "content" en hauteur de tel sorte qu'il ne passe pas sous le "browser" mais disparaisse (magiquement parlant) ??? On définierait une limite qu'il ne peut pas dépasser !!!
02/04/2008, 09h12
E.Bzz

Citation:

Envoyé par polothentik

Une question qui pourrait peut etre solutionner le probleme: Est-il possible de limiter le defilement du "content" en hauteur de tel sorte qu'il ne passe pas sous le "browser" mais disparaisse (magiquement parlant) ??? On définierait une limite qu'il ne peut pas dépasser !!!

Oui : il faut fixer sa hauteur en css et ajouter le style overflow:hidden (overflow:scroll pour avoir l'ascenceur)

A+

Salut,

Excuse moi mais je ne saisi pas très bien...

Avec :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 #browser { border-width: 10px 9px 10px 9px; border-style: solid; border-color: #404040; background-color: #323232; height: 44px; z-index: 0; /* Patch pour fixer une élément de la page sous IE6 */; position : expression("absolute"); width : expression("990px"); top: expression( ( 155 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' ); left: expression( "center" ); }
Code:

1 2 3 4 5 6 7 8 9 10 #content { background-color: #6E6E6E; height: expression(100% - 228px); left: 331px; top: 228px; width: 780px; position: absolute; z-index: 0; overflow: hidden; }
Code:

1 2 3 4 5 6 7 8 9 10 11 12 #footer1 { border-style: solid none none none; border-width: 9px; border-color: #404040; background-repeat: repeat-x; background-image: url('../Images/Frame/masthead3_background.png'); height: 12px; width: 100%; overflow: hidden; position: absolute; bottom: 148px; }
La hauteur de mon "content" est fixée via "absolute". J'ai vu qu'il y avait également la possibilité de faire un clip : est-ce avec cela que je fixe les limite de mon overflow:hidden ??? Il ne le prend pas en compte pour le moment !

D'autre part, je ne souhaite pas rajouter une scrollerbar en plus de la barre de defilement de l'exploreur IE6 ou MF2...

Peux-tu préciser tes idées sur le css ??

Merci

02/04/2008, 09h50
E.Bzz
Tu es sûr de la compatibilité de tes expression() ?

En tous cas, ça

Code:

height: expression(100% - 228px);

risque de poser problème.
Essaye dans un premier temps avec une valeur en dur
Code:

1 2 height:700px; overflow:hidden;
Sinon, je pense qu'il faut poser la question (par rapport à l'utilisation d'expression() ) dans le forum CSS ... :?

EDIT : et avec un z-index:0 il risque pas de passer au-dessus des autres :aie:

A+
02/04/2008, 10h20
polothentik
"Alors là... je dis chapeau !" (dixit Les Deschiens)

Il m'a suffit d'enlever la ligne :

Code:

height: expression(100% - 228px);

et de mettre une valeur en dur (comme tu me l'as dis) :
Code:

1 2 height:700px; overflow:hidden;
pour que le textbox réagisse correctement... la saisie est désormais possible ! :mrgreen: C'est merveilleux ! Bon, le "content" deroule toujours sous le "browser" mais ça n'a pas l'air d'altérer le bon fonctionnement de la page : je conserve cette feinte !

Il ne me reste plus qu'à résoudre le problème de mon footer : help et c'est parfait !

Je poserais la question de savoir les enjeux et les limites de l'utilisation de expression()

Merci pour tout le temps que tu as bien voulu m'accorder ! :king: