TEXTAREA comportement différent

**daronmaster** · 22/01/2009, 09h47

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 :

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

**SpaceFrog** · 22/01/2009, 09h52

un petit coup d'œil là dessus

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

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

Code :

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

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

**daronmaster** · 22/01/2009, 10h19

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

**EIN-LESER** · 22/01/2009, 10h24

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

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

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

**daronmaster** · 22/01/2009, 10h27

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 :

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

**EIN-LESER** · 22/01/2009, 10h33

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

**daronmaster** · 22/01/2009, 10h33

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

**SpaceFrog** · 22/01/2009, 10h49

dasn le code donné la selection se fait sur

Code :

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

:d.selection.

avec d defini comme document...

suffit de definir d comme ton textArea non ?

**daronmaster** · 22/01/2009, 10h56

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 :

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

**SpaceFrog** · 22/01/2009, 11h01

??? 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 ...

**daronmaster** · 22/01/2009, 11h10

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)

**EIN-LESER** · 22/01/2009, 11h26

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

**EIN-LESER** · 22/01/2009, 11h28

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

**SpaceFrog** · 22/01/2009, 11h36

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 :

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

**daronmaster** · 22/01/2009, 11h44

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 :

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

**daronmaster** · 22/01/2009, 14h28

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

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
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 .

TEXTAREA comportement différent

JavaScript

Discussions similaires

Partager

Partager