Diviser le textarea en deux!

Version imprimable

24/05/2012, 10h35
mawkli

Diviser le textarea en deux!

Bonjour,
J'ai un textarea où s'écrit automatiquement des lignes lorsque je change les valeurs des champs dans le formulaire( des zones de texte et des listes déroulantes) et j'ai un bouton "vider" qui permet d'initialiser ces champs et de vider le textarea.
Le problème est que le textarea permet à l'utilisateur d'écrire aussi des commentaires,et une fois il clique sur "vider" je veux qu'il efface seulement ce qui a été entré via les champs et garder les commentaire,c'est à dire,en grosso modo,diviser le textarea en deux parties.mais je ne sais pas si c'est possible .Merci
24/05/2012, 10h39
SpaceFrog

il y a un "sépareteur" entre les deux zones ?

ou un truc qui permet de distinguer les commentaires du reste ?
24/05/2012, 10h44
mawkli

Oui j'aimerai par exemple mettre un séparateur tel que:

-------------------------------------------------------- par exemple
24/05/2012, 11h12
mawkli

Y a-t-il une possibilité pour contrôler ça ligne par ligne dans le textarea? parceque je sais que le nombre de lignes que je veux effacer est 5 par exemple.
24/05/2012, 11h29
SpaceFrog

peux tu nous montrer un exemple du contenu d'un textarea ?

a mon avis un simple replace avec une regExp permettrait de faire le ménage
24/05/2012, 11h40
mawkli

Voilà une capture exemple de ce que je veux faire,la partie en bas est celle que je veux qu"elle soit effacée en cliquant sur "vider"
je n'ai pas réussi à joindre la photo:(
le text area doit être comme ça:
--------------------------------------------------------------------------
ça c'est le commentaire utilisateur à ne pas effacer !!

------------------------------------------------------
type de diffuseur :DVB-T2
Emprunt pour une durÃ©e de:15jours
sa position dans les bÃ¢timents est:B3
le projet concernÃ© est:alen
sa prise utilisateur :max

Actuellement ma fonction qui vide les champs est la suivante

Code:

1
2
3
4
5
6
7
8
9
10
11
<script type='text/javascript'>
	function resetFields(){
	document.getElementById('element_3').selectedIndex=-1;
	document.getElementById('element_1').value="";
	document.getElementById('element_4').selectedIndex=-1;
	document.getElementById('element_2').value="";
	document.getElementById('element_5').value="";
	document.forms['form1'].elements['txtarea01'].value="";
 
}
</script>

je veux modifier la dernière ligne pour qu'elle n'efface que les lignes écrites via les champs ci-dessus

24/05/2012, 12h42
SpaceFrog

Code:

document.forms['form1'].elements['txtarea01'].value=document.forms['form1'].elements['txtarea01'].value.match(/-{2,}(\D*)-{2,}/)[0];
24/05/2012, 14h13
mawkli

Je n'ai pas compris ton code,je l'ai essayé tel qu'il est mais il ne fait rien!il n'efface pas du tout le textarea, est ce que tu peux m'expliquer l'idée?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<script type="text/javascript">
function clean(){
obj=document.forms[0].elements['textarea01']
propre=obj.value.match(/-{2,}(\D*)-{2,}/m)[0];
obj.value=propre
}
</script>
</head>
 
<body>
<form name="form1" />
<textarea name="textarea01" rows="20" cols="80"> </textarea>
<input type ="button" id="foo" onclick="clean()" value="clean"/>
</form>
 
<script type="text/javascript">
var texte="--------------------------------------------------------------------------\nça c'est le commentaire utilisateur à ne pas effacer !!\n\n\n\n------------------------------------------------------\ntype de diffuseur VB-T2\nEmprunt pour une durÃ©e de:15jours\nsa position dans les bÃ¢timents est:B3\nle projet concernÃ© est:alen\nsa prise utilisateur :max";
document.forms[0].elements['textarea01'].value=texte;		
</script>
</body>
 
</html>

24/05/2012, 14h38
mawkli

En fait,quand j'écrit une ligne avec des ---------------- il efface tout ce qui est dans textarea sauf la ligne!! mais déjà je ne sais pas comment mettre cette ligne par défaut au milieu de texarea?et comment dire dans 'onchange' des champs que l'écriture dans textarea sera après les -----?
24/05/2012, 14h50
SpaceFrog

Heu quand ce sera clair dans ta tête, revient nous exposer clairement ta demande.
Là on ne sais pas ce que tu cherches à faire précisément
Décris nous clairement et précisément l'ergonomie recherchée ...
24/05/2012, 15h01
mawkli

D'accord je m'explique,en fait je veux au chargement de la page mon textarea s'affiche avec la ligne (-----------------------)au milieu pour séparer la partie haute de commentaires de la partie basse où je dois dire à mes évenements 'onchange' des cinq champs d'écrire (après les -------),comme ça quand je clique sur le bouton 'vider' il efface la partie en bas et laisse la partie en haut des -----,voilà j'espère que l'idée est claire.merci
24/05/2012, 15h11
mawkli

1 pièce(s) jointe(s)

voilà une capture de ce que je veux faire

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
<script type="text/javascript">
function clean(){
obj=document.forms[0].elements['textarea01']
propre=obj.value.match(/^\D+-{2,}/m)[0];
obj.value=propre
}
 
function addtoTA(iid,txt){
document.forms[0].elements['textarea01'].value+="\n"+iid+" :\t"+txt;
}
</script>
</head>
 
<body>
<form name="form1" />
<textarea name="textarea01" rows="20" cols="80"> </textarea>
<input type ="button" id="foo" onclick="clean()" value="clean"/>
</form>
<input type="text" value="" id="id_1" onchange="addtoTA(this.value, this.id)" />
<input type="text" value="" id="id_2" onchange="addtoTA(this.value, this.id)" />
<input type="text" value="" id="id_3" onchange="addtoTA(this.value, this.id)" />
<input type="text" value="" id="id_4" onchange="addtoTA(this.value, this.id)" />
<input type="text" value="" id="id_5" onchange="addtoTA(this.value, this.id)" />
<input type="text" value="" id="id_6" onchange="addtoTA(this.value, this.id)" />
 
<script type="text/javascript">
var texte="\nCommentaire à conserver \n\n\n\n--------------------------------------------------------------------------\n";
document.forms[0].elements['textarea01'].value=texte;		
</script>
</body>
 
</html>

merci spaceFrog pour le code,la fonction clean() marche bien,la fonction addtoTA(iid,txt) ne fait pas exactement ce que je veux donc je la retiré,mais le code
Code:

1 2 3 4 <script type="text/javascript"> var texte="\nCommentaire à conserver \n\n\n\n--------------------------------------------------------------------------\n"; document.forms[0].elements['content'].value=texte; </script>
il "s'exécute" pas ,je veux dire au chargement de la page il ne s'affiche pas dans textarea.
aussi,pour dire au premier champ dans onchange d'écrire après les --------?

Code:

1
2
3
4
<script type="text/javascript">
var texte="\n\n\n\n\n--------------------------------------------------------------------------\n";
document.forms[0].elements['content'].value=texte;		
</script>

et tu fais un += dans le value du textarea

24/05/2012, 18h45
Auteur

Sans doute une question stupide, mais pourquoi ne pas utiliser deux textarea dont un en lecture seule ?
25/05/2012, 09h47
mawkli

Exuse moi spaceFrog mais je n'ai pas compris le += dans value sera suivi par quoi? genre est ce que sera comme ça <textarea value+= texte> ?
25/05/2012, 09h50
SpaceFrog

Je pense que tu devrais d'abord apprendre la javascript avant de vouloir te lancer dans des developpements comme ça ...

un exemple de +=

Code:

<input type="texte" onclick="this.value+='_ajout_'" />

Cela ne répond pas à ma question,parce que t'avait écrit cela
Code:

1 2 3 4 <script type="text/javascript"> var texte="\n Commentaire à conserver \n\n\n\n\n\n--------------------------------------------------------------------------\n"; document.forms[0].elements['content'].value=texte; </script>
et je voulais savoir comment ça se lance avec le chargement de la page dans textarea,tu m'as dit qu'il faut mettre un += dans value ,mais suivi de quoi?

25/05/2012, 10h03
vermine
SpaceFrog, il n'y aurait pas une inversion dans tes paramètres ?
Code:

1 2 3 function addtoTA(iid,txt){...} addtoTA(this.value, this.id);
Ce qui ne change pas grand chose vu que c'est un exemple et que ça ne bloque pas. ;)
25/05/2012, 10h05
SpaceFrog

Citation:

Exuse moi spaceFrog mais je n'ai pas compris le += dans value sera suivi par quoi? genre est ce que sera comme ça <textarea value+= texte> ?

Code:

<input type="texte" onclick="this.value+='_ajout_'" />

Si ça ne répond pas à ta question ...

Continuez sans moi , c'est peine perdue ...
25/05/2012, 10h07
mawkli

Oui parce que j'ai essayé ça

Code:

<textarea id='area_01' name='content' cols='78' rows='14' onload ="this.value+=texte"></textarea>

il ne marche pas
25/05/2012, 10h09
SpaceFrog

Depuis quand un textarea accepte un onload ? :roll:
25/05/2012, 10h12
mawkli

Ah c'est pour ça! mais il n'y a pas une solution pour qu'il se charge avec la page?
25/05/2012, 10h18
SpaceFrog

Tu n'as donc rien compris aux codes donnés précédemment ????

Soit tu mets ton code js dans le flux après que les objets aient été instanciés

Soit tu utilises le onload mais du body ...
25/05/2012, 10h31
mawkli

Ok merci,j'avais confondu les choses