TEXTAREA comportement différent

Version imprimable

Bonjour,

voici un bout de code html et JavaScript qui me permet lors d'une sélection dans un TEXTAREA d'afficher la sélection. Cependant dans mon exemple, cela ne marche que si la balise TEXTAREA est dans une balise P. Et meme pire après une selection dans le premier TEXTAREA, le resultat est erroné correspondant à la sélection du second s'il y en avait eu une auparavant. Pourriez vous me dire où est le problème ????

merci
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 <html> <head> </head> <body> <textarea cols="50"> 1111111 blablabli sdnsdlqskdqlskd fdjfjf fd d d ddpddlmd djnsdlkcnds dcdcsdcsdc csdcsdcsùdcsùù csdc sdcs </textarea><br/><br/> <p> <textarea cols="50"> 22222222 blablabli sdnsdlqskdqlskd fdjfjf fd d d ddpddlmd djnsdlkcnds dcdcsdcsdc csdcsdcsùdcsùù csdc sdcs </textarea> <br/><br/><br/><br/><br/> </p> <script language="JavaScript" type="text/JavaScript"> window.onload = function(){ var el = document.getElementsByTagName('textarea'); for(var i=0; i < el.length ; i++){ var elt = el[i]; elt.onmouseup = function(){ window.alert(elt.value.substring(elt.selectionStart, elt.selectionEnd)); } } } </script> </body> </html>
NB: je suis sous firefox

un petit coup d'œil là dessus

http://www.webreference.com/js/colum...ssbrowser.html

sinon j'ai trouvé ça mais pas testé :
Code:

1 2 3 4 function getSel(){ var w=window,d=document,gS='getSelection'; return (''+(w[gS]?w[gS]():d[gS]?d[gS]():d.selection.createRange().text)).replace(/(^\s+|\s+$)/g,''); }

22/01/2009, 10h19
daronmaster

Bonjour,

j'ai regardé ce que tu viens de me donner comme information et le problème c'est que ces différents code ne marche pas par une balise TEXTAREA. Pour touttexte contenu dans une balise autre que TEXTAREA ça marche et tant mieux pour celles-ci mais cela ne correspond pas à ma recherche.

La sélection étant faite dans un textarea ...., la seule solution que j'ai trouvé est celle avec "selctionStart" et "selectionEnd", et le problème c'est que ça ne marche que si le TEXTAREA est dans une balise P et je cherche à savoir pourquoi.

Merci

Je me plante peut être mais pourquoi tu fais sa avec window.onload ?

il serait pas plus simple de le faire comme sa: ?

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<html>
    <head>
<script language="JavaScript" type="text/JavaScript">
 
Ta_function(){
 
	var el = document.getElementsByTagName('textarea');
 
	for(var i=0; i < el.length ; i++){
 
		var elt = el[i];
 
		elt.onmouseup = function(){
 
					window.alert(elt.value.substring(elt.selectionStart, elt.selectionEnd));
				}
 
	}
}
</script>
    </head>
 
    <body>
 
<textarea cols="50" onMouseUp="javascript:Ta_function();">
1111111 blablabli sdnsdlqskdqlskd fdjfjf fd d d ddpddlmd 
djnsdlkcnds dcdcsdcsdc  csdcsdcsùdcsùù   csdc sdcs
 
</textarea><br/><br/>
 
<p>
<textarea cols="50" onMouseUp="javascript:Ta_function();">
22222222 blablabli sdnsdlqskdqlskd fdjfjf fd d d ddpddlmd 
djnsdlkcnds dcdcsdcsdc  csdcsdcsùdcsùù   csdc sdcs
 
</textarea>
<br/><br/><br/><br/><br/>
</p>
 
 
</body>
</html>

Je me plante peut être sérieusement car je l'ai pas testé mais je pense que j'aurais essayé comme sa :aie:

bonne idée mais ne marche pas

et en relisant le code me parrait incohérent

non ???

tu reparcours tout les textarea et change leur attribut onmouseup ....

mais j'ai testé comme ça :

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
29
30
31
32
33
34
35
36
 
 
<html>
    <head>
<script language="JavaScript" type="text/JavaScript">
 
Ta_function(){
 
 
 
	window.alert(elt.value.substring(elt.selectionStart, elt.selectionEnd));
 
}
</script>
    </head>
 
    <body>
 
<textarea cols="50" onmouseup="javascript:Ta_function();">
1111111 blablabli sdnsdlqskdqlskd fdjfjf fd d d ddpddlmd 
djnsdlkcnds dcdcsdcsdc  csdcsdcsùdcsùù   csdc sdcs
 
</textarea><br/><br/>
 
<p>
<textarea cols="50" onmouseup="javascript:Ta_function();">
22222222 blablabli sdnsdlqskdqlskd fdjfjf fd d d ddpddlmd 
djnsdlkcnds dcdcsdcsdc  csdcsdcsùdcsùù   csdc sdcs
 
</textarea>
<br/><br/><br/><br/><br/>
</p>
 
 
</body>
</html>

et ça ne marche pas du tout

22/01/2009, 10h33
EIN-LESER

Comme dit je l'ai pas testé mais il me paraissais plus logique d'appeler ta fonction a partir du textfield concerné.

C'est tout :)
22/01/2009, 10h33
daronmaster

j'ai changé le onmouseup en onselect pour ne pas réagir dès qu'un clic est effectué dans le textarea pour avoir plus de cohérence mais ça ne marche toujours pas ...

je ne sais plus quoi faire ...

j'implore votre aide à vous programmeur fou :cry:
22/01/2009, 10h49
SpaceFrog

dasn le code donné la selection se fait sur

Code:

:d.selection.

avec d defini comme document...

suffit de definir d comme ton textArea non ?

Je vais reformuler ma question car j'arrive à récupérer la sélection sur un TEXTAREA mais que si celui-ci est dans une balise P, et là est mon problème, je voudrais pouvoir faire cela pour tous les TEXTAREA.

Ensuite, en ce qui concerne la sélection dans un TEXTAREA, seules les propriétés selectionStart et selectionEnd peuvent être utilisées, pour avoir essayer les autres dont quelques de vos propositions.

Si vous copier-coller ce code ci-dessous
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 <html> <head> </head> <body> <textarea cols="50"> 1111111 blablabli sdnsdlqskdqlskd fdjfjf fd d d ddpddlmd djnsdlkcnds dcdcsdcsdc csdcsdcsùdcsùù csdc sdcs </textarea><br/><br/> <p> <textarea cols="50"> 22222222 blablabli sdnsdlqskdqlskd fdjfjf fd d d ddpddlmd djnsdlkcnds dcdcsdcsdc csdcsdcsùdcsùù csdc sdcs </textarea> <br/><br/><br/><br/><br/> </p> <script language="JavaScript" type="text/JavaScript"> window.onload = function(){ var el = document.getElementsByTagName('textarea'); for(var i=0; i < el.length ; i++){ var elt = el[i]; elt.onselect = function(){ window.alert(elt.value.substring(elt.selectionStart, elt.selectionEnd)); elt.selectionStart=null; elt.selectionEnd=null; } } } </script> </body> </html>
dans un fichier .html et que vous le lancer en local, vous verrez bien le problème.

Et donc je vous pose la question "pourquoi ça marche dans un cas et pas dans l'autre?"

merci pour votre aide

22/01/2009, 11h01
SpaceFrog

??? heu la problématique n'est pas claire ...

il se passe quoi au juste dans l'un et l'autre cas ??
sachant qu'a la base un textarea n'a rien à faire dans une balise p ...
22/01/2009, 11h10
daronmaster

SpaceFrog >

est-ce que tu peux copier-coller le code sur ton pc et voir le résultat ?

tu sélectionne un bout de texte dans le second textarea, normalement tu as une popup qui te donne le texte selectionné et si tu essaies sur le premier textarea tu n'aura rien d'afficher.

Essaie juste pour voir et tu comprendras alors ma question. (ça ne prends que 30 secondes)
22/01/2009, 11h26
EIN-LESER

Je me suis permis de tester déjà apparemment le soucis c'est que ta variable n'est jamais remplace une fois qu'elle a été remplis et du coup ré affiche toujours le même chose 8O
22/01/2009, 11h28
EIN-LESER

Idée bête et méchante:

Teste avec document.getElementByID
plustot que ByTagname

Sa devrait résoudre le problème des areas dans un <p> ou pas

:mouarf:

bonne nouvelle ...
rien à voir avec la balise p ...

c'est juste une question d'attribution de fonction dans une boucle .. un classique de ce forum ^^

en fait tes deux textarea sont renseignés avec une fonction qui renvoie la selection du dernier textarea (le dernier i de la boucle)
si tu mets 200 texte area isl chercheront tous à envoyer la selection du dernier ^^

voici la solution:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <script language="JavaScript" type="text/JavaScript"> function foo(){ var el = document.getElementsByTagName('textarea'); for(var i=0; i < el.length ; i++){ var elt = el[i]; el[i].value=el[i].innerHTML; elt.onselect = function(){ window.alert(this.value.substring(this.selectionStart, this.selectionEnd)); this.selectionStart=null; this.selectionEnd=null; } } } </script>

WOOAWW, toutes ces réponses ....

dsl je n'ai pas eu le temps de tout lire mais j'ai LA solution, ou du moins celle qui répond à mes attentes, après les votres sont peut-etre correctes aussi et je n'edn doute pas.

voilà le code :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
 
<html>
    <head>
    </head>
 
    <body>
 
<br/>
 
<textarea cols="50">
1111111 blablabli sdnsdlqskdqlskd fdjfjf fd d d ddpddlmd 
djnsdlkcnds dcdcsdcsdc  csdcsdcsùdcsùù   csdc sdcs
 
</textarea>
 
<br/>
 
<textarea cols="50">
22222222 blablabli sdnsdlqskdqlskd fdjfjf fd d d ddpddlmd 
djnsdlkcnds dcdcsdcsdc  csdcsdcsùdcsùù   csdc sdcs
 
</textarea>
 
 
 
<script language="JavaScript" type="text/JavaScript">
 
function my_attach(e){
 
	var element = e.target;
 
	window.alert(element.value.substring(element.selectionStart, element.selectionEnd));
}
 
window.onload = function(){
 
	var el = document.getElementsByTagName('textarea');
 
	for(var i=0; i < el.length ; i++){
 
		var elt = el[i];
 
		elt.addEventListener("select",my_attach,false);
	}
}
</script>
</body>
</html>

Sur ce je passe en résolu.

Merci à tous pour vos aides

et pour la compatibilité IE et firefox, voici le code :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
<html>
    <head>
    </head>
    <body>
<br/>
 
<textarea cols="50">
 
1111111 blablabli sdnsdlqskdqlskd fdjfjf fd d d ddpddlmd 
 
djnsdlkcnds dcdcsdcsdc  csdcsdcsùdcsùù   csdc sdcs
 
</textarea>
 
<br/>
 
<textarea  cols="50">
 
22222222 blablabli sdnsdlqskdqlskd fdjfjf fd d d ddpddlmd 
 
djnsdlkcnds dcdcsdcsdc  csdcsdcsùdcsùù   csdc sdcs
 
</textarea>
 
 
<script language="JavaScript" type="text/JavaScript">
 
function my_attach(e){
 
	var element;
 
	if (!e) e = window.event;
 
	if(e.srcElement) element = e.srcElement; //IE
 
	else if (e.target) element = e.target;
 
	var selection="";
 
	if (element.selectionStart) selection = element.value.substring(element.selectionStart,element.selectionEnd);
 
	else{ //IE
 
		selection = document.selection.createRange().text;
	}
 
	window.alert(selection);
}
 
window.onload = function(){
 
	var el = document.getElementsByTagName('textarea');
 
	for(var i=0; i < el.length ; i++){
 
		var elt = el[i];
 
		if (elt.attachEvent){//IE
 
			elt.attachEvent("onmouseup",my_attach);
 
		}else{
 
			elt.addEventListener("mouseup",my_attach,false);
		}
	}
}
 
</script>
 
</body>
 
</html>

Bon courage en espérant que cela ait aidé certains d'entre vous .:yaisse2: