Discussion :

[sven666]

Bonjour,
j'ai un problème avec mon script jQuery.
Dans ma page html, j'ai plusieurs textareas. Je veux que lorsqu'on appui sur la touche "entrer" dans une de ces zones de texte :
- une nouvelle zone de texte est ajoutée sous celle qui a le focus
- la nouvelle zone de texte prend le focus tandis que l'ancienne la perd (j'inclus dans le terme "focus" également le style css qui va avec)
- la zone de texte qui avait précédemment le focus le perd

Seulement, une zone de texte ajoutée suite à un appui sur la touche "entrer" ne perd pas le focus quand je clique sur une autre. On dirait que les zones de texte créées ne sont pas sélectionnables avec un sélecteur. Comment faire pour qu'elles le soient ?

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
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<script>
			$(function() {
				var $textarea = $('textarea');				
 
				function donneFocus(cible){
					//enleve le focus des textareas
					$textarea.css('border-left','none');
					//donne le focus a la textarea cible
					$(cible).css('border-left','8px solid #64ca5e').focus();
				}				
 
				// Evenements souris et clavier
				$textarea.focusin(function(){
					donneFocus($(this));
				});
				$textarea.keydown(function(event){
					var keycode = (event.keyCode ? event.keyCode : event.which);
					if(keycode == '13'){//13 = touche entrer
						event.preventDefault();//annule le retour à la ligne de l'appui sur 'enter'
						var new_textarea = $('<textarea class="paragraphe">new apres para</textarea>');
						$(this).after(new_textarea);
						donneFocus(new_textarea);
						$textarea.autosize({append: "\n"});
					}
				});
			});
		</script>

Merci d'avance

[Bovino]

C'est normal (et déjà traité un nombre incalculable de fois...) aucun événement n'est attaché aux textarea que tu crées.

Regarde du coté de .on() et en particulier la partie sur les événements délégués !

[sven666]

merci pour la piste, mais je n'y arrive toujours pas.
Je lie mes évènements, mais j'obtiens le même résultat. Je ne trouve pas d'exemple ou de cours sur internet qui pourraient m'aider sur ce problème.

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
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<script>
			$(function() {
				var $textarea = $('textarea');				
 
				function donneFocus(cible){
					//enleve le focus des textareas
					$textarea.css('border-left','none');
					//donne le focus a la textarea cible
					$(cible).css('border-left','8px solid #64ca5e').focus();
				}				
 
				// Evenements souris et clavier
				$textarea.on("focusin",this,function(){
					donneFocus($(this));
				});
				$textarea.on("keydown",this,function(event){
					var keycode = (event.keyCode ? event.keyCode : event.which);
					if(keycode == '13'){//13 = touche entrer
						event.preventDefault();//annule le retour à la ligne de l'appui sur 'enter'
						var new_textarea = $('<textarea class="paragraphe">new apres para</textarea>');
						$(this).after(new_textarea);
						donneFocus(new_textarea);
						$textarea.autosize({append: "\n"});
					}
				});
			});
		</script>

[Bovino]

Je lie mes évènements

Sur les éléments que tu crées ? Tu es sûr ?

en particulier la partie sur les événements délégués

[sven666]

Je pensais les lier mais ça revenait au même en fait.

J'ai trouvé un cours Javascript qui parle des évènements délégués.
J'en arrive à ça, mais ça ne fonctionne toujours pas. Qu'est-ce que je fais de mal ?

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
16
 
$(function() {				
				$('textarea').autosize({append: "\n"});
 
				$('textarea').on('focus',$('textarea'),function(){
					$('textarea').css('border-left','none').css('padding-left','30px');
					$(this).css('border-left','8px solid #64ca5e').css('padding-left','22px').focus();
				});
 
				$('textarea').on('keydown','textarea',function(event){
					event.preventDefault();
					$(this).after('<textarea class="paragraphe">new apres titre</textarea>').css('border-left','none').css('padding-left','30px');
					$(this).next("textarea").css('border-left','8px solid #64ca5e').css('padding-left','22px').focus();
					$('textarea').autosize({append: "\n"});
				});
			});

[Bovino]

.on() !

[sven666]

Bon, il y a du progrès. Cette fois c'est bien délégué.
Par contre, la fonction focus() fonctionnait avant, mais plus maintenant. Comment dois-je faire pour que la nouvelle zone de texte reçoive le focus ?

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
16
17
18
19
20
21
22
23
24
 
$(function() {			
				$('textarea').autosize({append: "\n"});
 
				function donneFocus(cible){
					$('textarea').css('border-left','none').css('padding-left','30px');
					$(cible).css('border-left','8px solid #64ca5e').css('padding-left','22px');
					$(cible).focus();
				}
 
				$('body').on('focus','textarea',function(){
					donneFocus($(this));
				});
 
				$('body').on('keydown','textarea',function(event){
					var keycode = (event.keyCode ? event.keyCode : event.which);
					if(keycode == '13'){//touche entrer
						event.preventDefault();
						$(this).after('<textarea class="paragraphe">new apres titre</textarea>');
						$(this).next("textarea").autosize({append: "\n"});
						donneFocus($(this).next("textarea"));
					}
				});
			});

[Bovino]

Tout simplement parce que l'événement est attaché à la balise <body> dans ton code, donc $(this) ne correspond pas à ton textarea.

De plus

Code :

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

donneFocus($(this));

tu transmets déjà un objet jQuery, pas besoin de $(cible) dans la fonction, cible revient au même.

Code :

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

1
2
3
4
5
6
7
8
function donneFocus(cible){
	$('textarea').css('border-left','none').css('padding-left','30px');
	cible.css('border-left','8px solid #64ca5e').css('padding-left','22px');
	cible.focus();
}
$('body').on('focus','textarea',function(e){
	donneFocus($(e.target));
});

[sven666]

merci pour les précisions.
Le focus ne s'effectue toujours pas. J'ai un peu de mal à comprendre que le $(this) ne correspond pas à ma zone de texte (même si ça peut paraître évident en temps normal), car quand je fais $(this).after(...), j'ajoute bien une zone de texte après celle qui a le focus et pas après le body.

[Bovino]

Ah oui tiens... j'ai dis une bêtise... Au temps pour moi

[sven666]

ah... et sais-tu comment je peux faire ?

[sven666]

j'ai trouvé.
c'est ma fonction autosize qui fait que ça ne fonctionne pas, mais j'en ai besoin.
Je finirai bien par y arriver, seul. Merci