JQuery : keydown dans un focus ?

Bonjour,

J'ai 2 fonctions qui font les choses suivantes : effacement du text par défaut dans un textarea et limitation du nombre de caractère qui peuvent être écrits :

		$("textarea.textarea_wall").focus(function(){
			var id_under_wall = $(this).attr("id");
			  $("textarea#"+id_under_wall).val("");
	  });
	  
	  	$("textarea.textarea_wall").keydown(function(){
			var r=$(this).val().length;
			alert(r);
			if(r > 3){
			$(this).val($(this).val().substr(0, 3));
		}});

Les deux fonctionnent séparément mais pas ensemble : quand je focus sur le textarea, le texte par défaut s'efface mais je tape un caractère, il s'efface également. Alors logiquement, j'ai essayer d'imbriquer le keydown dans le focus (ordre logique), mais ça ne corrige pas le problème. Une idée ?
Modifié par Tchernobyl (12 Aug 2011 - 21:05)

Salut,

Je te conseillerais de garder seulement ton évènement focus, mais de tester la valeur du champs pour décider si tu supprime le contenu ou pas.

Hello,

Même conseil que Vaxilart, voir l'exemple que je te donne ci-dessous. Sinon, attention aux id et aux classes. Tu cibles le textarea portant la classe textarea_wall ( $("textarea.textarea_wall") ), en ensuite tu cherches son id… Ça ne peut pas fonctionner…

Bref, voici un exemple avec 3 événements (focusin, focusout, keydown) via un appel bind (ce qui simplifie le code et le rend plus lisible) :

var defaultVal = "texte par défaut";
$(".textarea_wall").val(defaultVal);
$(".textarea_wall").bind({

	focusin:function(){
		if($(this).val() == defaultVal){
			$(this).val("");
		}
	},
			
	focusout:function(){
		if($(this).val()==""){
			$(this).val(defaultVal);
		}
	},
	
	keydown:function(){
		var r=$(this).val().length;
		if(r > 3){ 
			$(this).val($(this).val().substr(0, 3));
		}
	}
});

Ces explications sont très clean, je me rends compte que j'avais de mauvaises habitudes, merci.

En faisait les tests, je me suis rendu compte que ma fonction de limitation du nombre de caractère (celle initiée par keydown) ajoute toujours le dernier caractère tapé après le 3ème qui est pourtant la limite. C'est inérant à la fonction substr ce comportement ?

Tchernobyl a écrit :
En faisait les tests, je me suis rendu compte que ma fonction de limitation du nombre de caractère (celle initiée par keydown) ajoute toujours le dernier caractère tapé après le 3ème qui est pourtant la limite. C'est inérant à la fonction substr ce comportement ?

Ce n'est pas le troisième caractère, mais le quatrième.
substr() est basé sur du zéro-index : 0 - 1 - 2 - 3, donc il y a bien 4 éléments.

EDIT : et je dis une grosse bêtise, j'ai lu en travers ta question… (j'avais cru que tu parlais du premier caractère à extraire). Non il devrait ne ressortir que 3 caractères, c'est bizarre. Je regarde ça un peu plus en profondeur et je reviens vers toi


EDIT 2 : Donc, oui c'est normal car tu appelles l'événement keydown. Il faut en fait appeler l'événement keyup pour tester une fois que le caractère est tapé.
Ce qui donne :

var defaultVal = "texte par défaut";
$(".textarea_wall").val(defaultVal);
$(".textarea_wall").bind({
		
	focusin:function(){
		if($(this).val() == defaultVal){
			$(this).val("");
		}
	},
	
	focusout:function(){
		if($(this).val()==""){
			$(this).val(defaultVal);
		}
	},
		
	keyup:function(){
		var r=$(this).val().length;
		if(r > 3){ 
			$(this).val($(this).val().substr(0,3));
		}
	}
});

Modifié par ZeB_panam (13 Aug 2011 - 20:45)

Tu es sûr ? Car si keyup teste l’événement de relâchement la touche du clavier, tant que je reste appuyer sur la touche la limitation n'est pas respectée (elle l'est quand je la relâche).

Quand j'y pense c'est peut-être relié à un plugin que j'utilises pour agrandir la zone du textarea en fonction du texte écrit ? :

			if($(this).val() == defaultVal){
				$(this).val(""); 
				$(this).expandingTextArea();
			} 

Non rien à voir, je teste en local chez moi sur un exemple basique.
Mais dans ce cas, tu peux tester sur les deux événements :

var defaultVal = "texte par défaut";
$(".textarea_wall").val(defaultVal);
$(".textarea_wall").bind({
			
	focusin:function(){
		if($(this).val() == defaultVal){
			$(this).val("");
		}
	},
			
	focusout:function(){
		if($(this).val()==""){
			$(this).val(defaultVal);
		}
	}
});

$(".textarea_wall").bind('keyup keydown',function(){
	var r=$(this).val().length;
	if(r > 3){ 
		$(this).val($(this).val().substr(0,3));
	}
});

Sinon, n'y a-t-il pas un évènement "keypress" (je dis de mémoire) ?

Oui keypress est censé comprendre les events keydown et keyup mais va savoir pourquoi, j'ai essayé seule la méthode de ZeB_panam fonctionne.

J'avoue ne pas tout comprendre pour le coup, m'enfin ça marche c'est le principale. Bien joué Zeb

Tchernobyl a écrit :
Oui keypress est censé comprendre les events keydown et keyup

Non, keypress ne comprend que la méthode keydown, mais gère en plus la répétition.