Événement lors d'une saisie ou non de caractères dans un TextBox

Juju54350 · 02/12/2010, 09h51

Bonjour,

J'aimerais savoir si dans jQuery, il existe un événement "TextChanged" pour les TextBox. Est-ce que ceci marcherait :

Code :

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

1
2
 
$("#IDDeMaTextBox").change()

En fait, je voudrais cacher un composant si un TextBox est vide.

Merci d'avance de votre aide.

SpaceFrog · 02/12/2010, 14h38

teste ?

Juju54350 · 02/12/2010, 15h15

Bah ça n'avait pas l'air de marcher, c'est pour ça que je me pose la question. J'avais essayé ça :

Code :

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

1
2
3
4
5
6
7
8
 
$(document).ready(function() {
    $("#IDTextBox").change() {
        if ($("#IDTextBox").text() == "") {
            $("#AutreID").hide()
        };
    };
});

Maintenant il y a peut-être un problème dans mon code mais je ne vois pas.

SpaceFrog · 02/12/2010, 15h19

.val() ?

Juju54350 · 02/12/2010, 15h43

Non plus. Voilà mon vrai code :

Code :

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

1
2
3
4
5
6
 
$("#ctl00_birth_day").change(function() {
    if ($("#ctl00_birth_day").val() == "") {
        $("#ctl00_birth_date_checking").hide()
    };
});

Je n'ai pas oublié "document.ready" et le composant que je veux cacher est un div. Est-ce que "hide()" est compatible avec des div ?

Oragon Efreet · 02/12/2010, 16h36

Assure-toi que les éléments du DOM que tu manipules avec ton script existent bien au moment de l'exécution du script. Pour cela, englobe le dans la fonction $(document).ready.
L'événement change() est balancé lorsque la valeur du champ de texte est modifié et que tu quittes ce champ de texte. Appuie sur tabulation ou clique ailleurs sur ta page pour générer l'événement.

J'ai testé ton code avec ce body dans une page de base, pas de soucis :

Code html :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
 
  <body>
		<form action="test_submit" method="get" accept-charset="utf-8">
			<p>
 
		  		<label for="ctl00_birth_day">test</label><input type="text" name="ctl00_birth_day" value="test" id="ctl00_birth_day" />
		  		<input type="submit" value="Continue &rarr;">
 
	  		</p>
		 </form>
 
		 <div id="ctl00_birth_date_checking">
		 	Ce champ est effacé si ctl00_birth_day est changé à vide
		 </div>
 
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
   <script type="text/javascript" charset="utf-8">
 
 
   $(document).ready(function(){
		$("#ctl00_birth_day").change(function() {
			    if ($("#ctl00_birth_day").val() == "") {
			        $("#ctl00_birth_date_checking").hide()
		    };
		});
	});
 
 
   </script>
  </body>

Juju54350 · 02/12/2010, 16h54

Ah d'accord, mais je n'ai pas oublié "$(document).ready", c'est juste que j'ai plusieurs choses dans la balise <script>. La seule différence entre ton code et le mien, c'est que je travaille sous ASP.NET (je ne sais pas si ça change quelque chose) et que j'utilise un TextBox à la place de ton label.

Maintenant, je pense que c'est en rapport avec le PostBack, je m'explique :

- mon div est invisible au départ ;

- il ne devient visible si la date que j'ai saisie est incorrecte et après avoir cliqué sur un Button (donc le PostBack est à true);

- il doit être à nouveau invisible s'il n'y a pas de texte dans le TextBox.

02/12/2010, 14h38	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 29 994 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 29 994 Points : 45 067 Points : 45 067	teste ? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

02/12/2010, 15h19	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 29 994 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 29 994 Points : 45 067 Points : 45 067	.val() ? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

02/12/2010, 16h54	#7
Juju54350 Membre régulier Julien Ricardo Inscription : juillet 2010 Messages : 248 Détails du profil Informations personnelles : Nom : Julien Ricardo Âge : 23 Informations forums : Inscription : juillet 2010 Messages : 248 Points : 84 Points : 84	Ah d'accord, mais je n'ai pas oublié "$(document).ready", c'est juste que j'ai plusieurs choses dans la balise <script>. La seule différence entre ton code et le mien, c'est que je travaille sous ASP.NET (je ne sais pas si ça change quelque chose) et que j'utilise un TextBox à la place de ton label. Maintenant, je pense que c'est en rapport avec le PostBack, je m'explique : - mon div est invisible au départ ; - il ne devient visible si la date que j'ai saisie est incorrecte et après avoir cliqué sur un Button (donc le PostBack est à true); - il doit être à nouveau invisible s'il n'y a pas de texte dans le TextBox.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email