élément créé, et sélection

Version imprimable

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:

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

07/11/2012, 17h43
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 !

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:

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>

08/11/2012, 07h47
Bovino

Citation:

Envoyé par sven666

Je lie mes évènements

:roll:

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

Citation:

Envoyé par Bovino

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

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:

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

08/11/2012, 12h01
Bovino

:no:

:fleche: .on() !

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:

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

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:

donneFocus($(this));

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

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

08/11/2012, 17h32
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. :koi:
08/11/2012, 17h37
Bovino

Ah oui tiens... j'ai dis une bêtise... Au temps pour moi :oops:
08/11/2012, 17h39
sven666

ah... et sais-tu comment je peux faire ? :mouarf:
08/11/2012, 18h59
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 ;)