Discussion :

[polothentik]

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 :

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

<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 :

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

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

[E.Bzz]

Bonjour,
il vient d'où le defaultValue ?



A+

[Jumano]

Bonjour,
Tu peux faire comme ceci :

Code :

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

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>

et

Code :

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

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>

[polothentik]

J'avoue que le defaultValue émane d'une inspiration personnel...
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 !

Ainsi :

Code :

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

<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 :

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

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...

AJAX = Gros Bobos

[E.Bzz]

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+

[polothentik]

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 :

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

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;
}

[E.Bzz]

Fonctionne nickel sous IE 6 et FF2 ...



A+

[polothentik]

tu veux dire que ça marche chez toi ????

[E.Bzz]

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

A+

[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 ?

[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

[E.Bzz]

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 ?

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

On peut voir la page complète ?

A+

[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 !!

[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!

[E.Bzz]

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!

Tu peux préciser / formuler autrement

A+

[E.Bzz]

A moins que

Code :

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

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+

[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 !!!

[polothentik]

Code :

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

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 !

[E.Bzz]

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 :

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+

[polothentik]

les z-index :

- header : 1
- navigation : 1
- browser : 1
- left_menu : 1
- content : 0
- footer : aucun