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