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() !