Restreinde le nombre de lignes dans textarea

Version imprimable

06/09/2006, 11h11
gforce

Restreinde le nombre de lignes dans textarea

bonjour,

connaissez vous un moyen de restreinde le nombre de lignes dans textarea ? Par ex après 10 lignes on ne peu plus rien insérer

Merci
06/09/2006, 11h25
Hug0_76

Salut,

Restreindre un nombre de ligne non je ne sais pas faire mais par contre restreindre le nombre de caractères c'est possible avec du javascript!

Google ne t'a rien donné sur les lignes et les textarea???
06/09/2006, 11h34
gforce

pour le nombre de caractères j'ai déjà une fonction qui marche du tonerre mais j'aimerais aussi controller le nombre de ligne
06/09/2006, 11h49
olk2r

cela devrait peut-être pourvoir t'aider !!!
http://javascript.internet.com/page-...and-lines.html

Olive
06/09/2006, 11h59
SpaceFrog

avec un split sur le caractère de retour ligne puis la longeuer du tableau retourné ...
06/09/2006, 12h02
Hug0_76

Exact,
tout simplement compter le nombre \n !:marteau:
06/09/2006, 12h04
gforce

Citation:

Envoyé par olk2r

cela devrait peut-être pourvoir t'aider !!!
http://javascript.internet.com/page-...and-lines.html

Olive

merci c'est génial je vais essayer ça

que pourrais je ajouter a cette fonction pour qu'elle compte le nombre de ligne?

Code:

1
2
3
4
5
6
7
8
 
function limitText(limitField, limitCount, limitNum) {
	if (limitField.value.length > limitNum) {
		limitField.value = limitField.value.substring(0, limitNum);
	} else {
		limitCount.value = limitNum - limitField.value.length;
	}
}

Comme l'a dit spacefrog tu peux compter le nombre de caractère \n de ta chaine de caractères!
Code:

1 2 3 4 5 6 7 textarea = document.getElementById('id_text_area'); text = textarea.value; tab = text.split("\n"); if(tab.length >= 10) { textarea.disabled; }

j'ai testé mais ca ne n'a pas l'air de fonctionner
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function limitText(limitField, limitCount, limitNum) { if (limitField.value.length > limitNum) { limitField.value = limitField.value.substring(0, limitNum); } else { limitCount.value = limitNum - limitField.value.length; } textarea = limitField; text = textarea.value; tab = text.split("\n"); if(tab.length >= 10) { textarea.disabled; } }
Code:

1 2 3 4 5 6 <textarea name="pagetext" id="pagetext" onKeyDown="limitText(this.form.pagetext,this.form.countdown,360);" onKeyUp="limitText(this.form.pagetext,this.form.countdown,360);"> </textarea>
Il y a un autre problème c'est que lorsque je veux afficher le texte ecrit par la suite il ne me fait des retour à la ligne uniquement où j'ai tapé un retour chariot. Il faidrait que lorsque qu'il va a la ligne dans le texte area il m'imprime aussi un <\n>

Tiens voila un code, que l'on peut biensur améliorer mais en tout cas il fait l'action que tu cherches!
Autrement dit dès que les 10 lignes sont dépassés le textarea se désactive ;)!

Tu peux libérer le timeoutcreer, tu peux nommer différemment les fonctions, tu peux faire une fonction countRow beaucoup plus générique en lui passant en paramètre un id, tu peux changer de fonction si tu n'aimes pas getElementById....enfin bref tu fais ce que tu veux mais ca marche ;)!
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 <html> <head> <title>Textarea</title> <script language="JavaScript" type="text/javascript"> function countRow() { textarea = document.getElementById("text1"); text = textarea.value; tab = text.split("\n"); if(tab.length >= 10) { textarea.disabled = true; } } function action() { countRow(); setTimeout("action()",100); } </script> </head> <body> <textarea rows="10" cols="20" onFocus="action()" id="text1"> </textarea> </body> </html>
Testé uniquement sur IE!
Maintenant c'est testé sur FF ;)

bon je récapitule pcq ca ne va toujour pas et je n'arrive pas a trouver l'erreur.
Aussi serait il moyen de regrouper les 2 fonctions en une?

fichier js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
function limitText(limitField, limitCount, limitNum) {
	if (limitField.value.length > limitNum) {
		limitField.value = limitField.value.substring(0, limitNum);
	} else {
		limitCount.value = limitNum - limitField.value.length;
	}
}
 
function countRow() {
	textarea = document.getElementById("pagetext");
	text = textarea.value;
	tab = text.split("\n");
	if(tab.length >= 10) {
		textarea.disabled = true;
	}
}
 
function action() {
	countRow();
	setTimeout("action()",100);
}

ficher html

Code:

1
2
3
4
 
<textarea name="pagetext"id="pagetext" onFocus="action()"
		onKeyDown="limitText(this.form.pagetext,this.form.countdown,360);" 
		onKeyUp="limitText(this.form.pagetext,this.form.countdown,360);"></textarea>

Citation:

<textarea name="pagetext"id="pagetext" onFocus="action()"
onKeyDown="limitText(this.form.pagetext,this.form.countdown,360);"
onKeyUp="limitText(this.form.pagetext,this.form.countdown,360);"></textarea>
Code:

1 2 3 <textarea name="pagetext" id="pagetext" onFocus="action()" onKeyDown="limitText(this.form.pagetext,this.form.countdown,360);" onKeyUp="limitText(this.form.pagetext,this.form.countdown,360);"></textarea>
Et si tu changes ca???

NON après vérification ce n'est pas ca qui bug mais ta fonction limitText....
ben il faut voir ta fonction!
je regarde d'un peu plus près ton code....

Ton textarea est bien dans un formulaire???

this.form.countdown <= c'est quoi ca?? Ca sort d'où?

06/09/2006, 16h06
gforce

oui pour le formulaire
le countdown c'est pour le petit textearea qui affiche le nombre de caractère

ok merci :P

l y a un dernier problème c'est que lorsque je veux afficher le texte ecrit par la suite il ne me fait des retour à la ligne uniquement où j'ai tapé un retour chariot. Il faudrait que lorsque qu'il va a la ligne dans le textarea il m'imprime aussi un <\n> lors de l'affichage. Est ce compréhensible?
06/09/2006, 16h26
Hug0_76

Tu cherches à faire un compteur de caractères dans ton deuxième textarea c'est ca???

En fait ta fonction pour compter le nombre de caractères n'est pas terrible (enfin c'est mon avis).
Je reviens avec qqc que je préfère!
Après tu en feras ce que tu veux ;)!
06/09/2006, 16h29
gforce

voila donc il faudrait:

1 textarea => contenu
1 input => compteur de caractères
1 input => compteur de lignes

voila :

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
 
<html>
	<head>
		<title>Textarea</title>
		<script language="JavaScript" type="text/javascript">
 
			function countRow() {
				textarea = document.getElementById("pagetext");
				i = document.getElementById("nb_carac");
				i_res = document.getElementById("nb_carac_restant");
				text = textarea.value;
				tab = text.split("\n");
				i.value = text.length;
				i_res.value = 360 - text.length;
				if(tab.length >= 10 || text.length >= 360) {
					textarea.disabled = true;
				}
 
			}
			function action() {
				countRow();
				setTimeout("action()",100);
			}
		</script>
 
	</head>
 
 
	<body>
 
 
		<textarea name="pagetexte" id="pagetext" onFocus="action()" rows="10" cols="50"></textarea><br>
		<label>Nb caractères :</label><input type="text" id="nb_carac" size="4"><br>
		<label>Caractères restant :</label><input type="text" id="nb_carac_restant" size="4"><br>
 
 
	</body>
 
</html>

Ca te désactive ton truc quand tu passes à plus de 360 caractères et quand tu dépasses 10 lignes!
L'utilisation du innerHTML est beaucoup plus jolie, mais c'est un truc vite fait!

06/09/2006, 16h44
gforce

:D wouaw . c'ets top .Merci

Il faudrait juste que ca affiche de nombre de ligne restante.
Et peut etre laisser accès quand le nombre de caractère et ligne est atteint, si non l'utilisateur ne sais plus effacer.

mais si non c'est ca !cool!
06/09/2006, 17h06
Hug0_76

hum, bon atten un peu parce que là il y a un peu de bidouillage!
Je vais essayer de faire ca propre!

Bon je vais te faire ca ce soir, parce que là je dois y aller!
Sinon il faut supprimer une ligne ou 1 caractères au moment de rendre la main!
Essayes de comprendre le code et de le modifier, sinon attend ce soir!
06/09/2006, 17h23
gforce

ok merci je vais attendre ce soir de toute façon moi aussi je part .

a+ thx
06/09/2006, 22h17
gforce

je ne trouve pas de solution aux 2 problèmes :cry:

Salut,

bon voila EXCATEMENT ce que tu voulais!
Dsl pour hier soir!

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
 
<html>
	<head>
		<title>Textarea</title>
		<script language="JavaScript" type="text/javascript">
 
			/** Fonction qui va mettre à jour les champs en fonction du nombre de caractères entré ainsi que 
			*	du nombre de lignes.
			*/
			function countRow() {
				textarea = document.getElementById("pagetext");
				b = document.getElementById("modif");
				d1 = document.getElementById("nb_carac");
				d2 = document.getElementById("nb_carac_restant");
				d3 = document.getElementById("nb_lignes_restantes");
 
				text = textarea.value;
				tab = text.split("\n");
 
				d1.innerHTML = "Nb caractères : "+text.length;
				d2.innerHTML = "Caractères restant : "+(360 - text.length);
				d3.innerHTML = "Lignes restantes : "+(10 - tab.length);
 
				if(tab.length >= 10 || text.length >= 360) {
					textarea.disabled = true;
					b.disabled = false;
				}
			}
 
			/** Fonction permet le comptage des caractères ainsi que des lignes, grâce à l'appel de la fonction countRow() 
			*	On appel la fonction action() tous les 100e de seconde pour simuler le compage en temps réel.
			*/
			function action() {
				countRow();
				t =	setTimeout("action()",100);
			}
 
			/** Cette fonction permet tout simplement de rendre la main, lorsque l'on click sur le bouton : Modifier Text.
			*	Lorsqu'il y a 360 caractères, la fonction va supprimé le dernier caractère puis rendre la main au textarea.
			*	Lorsqu'il y a 10 lignes, la dernière sera supprimée, puis la main sera rendu au textarea.
			*/
			function main() {
				window.clearTimeout(t);
				var temp="";
				textarea = document.getElementById("pagetext");
				b = document.getElementById("modif");
				carac_restant = 360-textarea.value.length;
				ligne_restante = 10-(textarea.value.split("\n")).length;
			 	tab = (textarea.value).split("\n");
				if(ligne_restante == 0) {
					for(i=0;i<8;i++) {
						temp += tab[i]+"\n";
					}
					textarea.value = temp;
					alert(tab[0]);
				} else {
					if(carac_restant == 0) {
						textarea.value = (textarea.value).substring(0,(textarea.value).length-1);
					}
				}
				textarea.disabled = false;
				b.disabled = true;			
			}
 
 
			/** Fonction qui réinitialise tous les champs.*/
			function raz() {
				if(confirm("Souhaitez vous tout effacer ?")) {
					textarea = document.getElementById("pagetext");
					b = document.getElementById("modif");
					d1 = document.getElementById("nb_carac");
					d2 = document.getElementById("nb_carac_restant");
					d3 = document.getElementById("nb_lignes_restantes");
 
					/** On réinitialise tous les champs 
					*    - le textarea
					*	 - les champs comptant les caractères ainsi que les lignes
					*	 - pour le cas où le textarea est inutilisable, on lui rend la main
					*/
					textarea.value = "";
					d1.innerHTML = "Nb caractères : "+text.length;
					d2.innerHTML = "Caractères restant : "+(360 - text.length);
					d3.innerHTML = "Lignes restantes : "+(10 - tab.length);
					if((textarea.disabled)) {
						textarea.disabled = false;
					}
					b.disabled = true;
				}
			}
		</script>
 
	</head>
 
 
	<body>
 
		<textarea name="pagetexte" id="pagetext" onFocus="action()" rows="10" cols="50"></textarea><br>
 
		<div id="nb_carac">Nb caractères :</div><br>
		<div id="nb_carac_restant">Caractères restant :</div><br>
		<div id="nb_lignes_restantes">Lignes restantes :</div>  <br>
 
		<input type="button" value="Modifier le texte" onClick="main()" disabled id="modif">
		<input type="button" value="Tout effacer" onClick="raz()">	
 
	</body>
 
</html>

J'espère que ca te conviendra ;)!

07/09/2006, 10h09
gforce

c'est toi qui a écrit tout cà? :P
07/09/2006, 10h17
Hug0_76

oui, pourquoi?
07/09/2006, 10h25
gforce

franchement c'est super bien fait. Un grand merci en tout cas c'est super simpa de m'avoir aidé comme ca:ave:
07/09/2006, 10h27
Hug0_76

eh bien de rien!
Bon courage pour la suite de ton code alors ;)
07/09/2006, 10h46
gforce

si j'ajoute la balise form cela ne fonctionne plus. ca doit etre dans le chemin d'apelle
07/09/2006, 10h50
Hug0_76

ok! bon je vais regarder ;)!
07/09/2006, 10h55
gforce

en fait je ferai bien moi même mais j'ai pas envie d'abimer ton code lol

alors aussi peut etre mettre des parametres à la fonction comme ca on peut varier les nombres max juste en l'apellant.
07/09/2006, 11h32
Hug0_76

euh...la gforce j'ai bien peur que me compétence en JS s'arrète là!
Ou alors il faut vraiment que je me creuse la tête!
Ben je ne te promet rien mais je vais continuer à chercher parce que ca m'intrigue ;)!
Je te préviendrai par MP dès que j'ai une solus!
bonne journée!
A+ tard
07/09/2006, 11h35
gforce

ok thx