Discussion :

[narutobaka]

Bonjour,

J'aimerai pouvoir limiter sur un textarea le nombre de ligne que l'utilisateur peut utiliser.

J'ai réussit à faire une fonction qui récupère le nombre de ligne et affiche un message :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 function compte_ligne(lettre,texte)
{
	var nbligne_max=3;//nombre max de ligne souhaité
	var nl="\n";//correspond au caractère retour chariot
	if (lettre==13)
	{
		nbligne=texte.split(nl).length;
		if (nbligne>=nbligne_max)
		{
			alert("vous ne pouvez pas écrire plus de "+nbligne_max+" lignes");
		}
	}
}

Et c la que je bloque, à la place du message j'aimerai que l'utilisateur ne puisse plus faire ni retour chariot ni écrire de texte. J'ai donc utilisé ce 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
 
function compte_ligne(f,lettre,texte)
{
	var chaine="";
	var nbligne_max=3;//nombre max de ligne souhaité
	var nl="\n";//correspond au caractère retour chariot
	var tableau=texte.split(nl);
	var nbligne=texte.split(nl).length;
 
	if ((lettre==13)&&(nbligne>nbligne_max-1))
	{
		alert("vous ne pouvez pas écrire plus de "+nbligne_max+" lignes");
		for(var i=0;i<nbligne_max;i++)
		{
			chaine+=tableau[i];
		}	
		f.value=chaine;
		alert(chaine);
	}
}

Cela règle presque mon problème. Cependant même si l'utilisateur ne peut plus saisir de texte au dela des trois lignes, il peut encore faire 2 sauts de ligne.

Je ne comprend pas pourquoi il y a possibilité de faire 2 sauts de ligne.

Si qqn à une idée pour supprimer ces deux sauts de ligne.

Voilà l'appel depuis le formulaire

Code :

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

<textarea name="observation_form_validation_magasin" cols="50" rows="4" class="textarea" onkeyup="compte_caractere(this,this.form)" onKeyPress="compte_ligne(this,event.keyCode,observation_form_validation_magasin.value)">';

.

Je continue à chercher le pourquoi du comment

merci d'avance

[le_chomeur]

question bête hein , mais pourquoi ne pas limiter le nombre de caractères plutôt que le nombre de lignes ??

[d-Rek]

Un retour chariot c'est \r\n pas seulement \n

[narutobaka]

Bonjour,

question bête hein , mais pourquoi ne pas limiter le nombre de caractères plutôt que le nombre de lignes ??

Je limite déjà le nombre de caractère. Cependant, je génère un document pdf, après un certains nombres de traitement et pour que ce document tienne sur une page je dois limiter la saisie à 3 lignes.

Un retour chariot c'est \r\n pas seulement \n

Merci pour cette information. Je suis en train de regarder si ca pourrait résoudre mon soucis

Encore merci pour votre aide

cordialement,

[SpaceFrog]

oui un split sur un regExp de \r et \r\n et tu chopes la longueur du tableau obtenu

[narutobaka]

coucou tlm

et merci pour vos réponse.

J'ai un peu amélioré mon 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
 
function compte_ligne(texte)
{
	var nl="\r\n";
	var nbligne=texte.split(nl).length;
	return nbligne;
}
 
function limit_ligne(f,lettre,texte)
{
	var chaine="";
	var nbligne_max=3;//nombre max de ligne souhaité
	var nl="\r\n";//correspond au caractère retour chariot
	var tableau=texte.split(nl);
	var nbligne=compte_ligne(texte);
 
	if ((lettre==13)&&(nbligne>nbligne_max-1))
	{
		for(var i=0;i<nbligne_max;i++)
		{
			if (i<nbligne_max-1)
			{
				chaine+=tableau[i]+'\r\n';
			}
			else
			{
				chaine+=tableau[i];
			}
		}
		f.value=chaine;
	}
}

J'avais cependant encore eut un soucis avec un saut de ligne qui s'affichait malgré tous mes traitements.

j'ai donc testé onkeyup, onkeydown et onkeypress et pour éviter qu'il prenne en compte le dernier retour à la ligne, il semble qu'il faille utiliser onkeyup :

Code :

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

<textarea name="observation_form_validation_magasin" cols="50" rows="4" class="textarea" onkeyup="compte_caractere(this,this.form); limit_ligne(this,event.keyCode,observation_form_validation_magasin.value);">';

Ainsi il n'affiche plus le saut de ligne à la fin .

Encore merci pour votre aide.

J'indique le post comme résolu.

[SpaceFrog]

eventeullement à doubler sur le onmouseup pour eviter le coller du menu contextuel de la souris ...

[narutobaka]

Bonjour all

Suite à la remarque de Spacefrog je me suis rendu compte que je ne gère qu'une partie du problème avec mon précédent script.

Bon pour gérer la copie depuis le presse papier pas de soucis j'ai utilisé Onpaste="return false", ce qui bloque :
- clic/droit coller
- edition /coller
- et ctrl + v
Il s'agit d'un écouteur uniquement compatible IE.

Cependant mon script de gestion de saut de ligne ne gère que les saut de ligne explicite de l'utilisateur et qui ajoute un \r\n.

Il ne gère pas les retours à la ligne implicite du au dépassement en nombre de caractère de la valeur spécifié pour l'attribut col du textarea

J'ai donc fait un autre script :

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
75
76
77
78
79
80
81
function limit_carac_max_ligne(f,texte)
{
	var tableau_result=new Array();
	var nl="\r\n";
	var max_carac=10; //nombre de caractère maximum par ligne
	var max_ligne=3;//nombre de ligne maximum
	var chntmp="";
	var Maxchn="";
	var result="";
	var debug="";
	//chaque ligne du tableau represente une ligne délimité par un \r\n
	var tableau=texte.split(nl);
	debug+="tableau : " +tableau+"\n";
 
	//pour chaque ligne 
	for(var i=0;i<tableau.length;i++)
	{
		//on recupère la ligne
		chntmp=tableau[i];
		//si une ligne utilise X lignes du textarea
		while (chntmp.length>max_carac)
		{
			//on recupère les max premiers caractères
			Maxchn=chntmp.substring(0,max_carac);
			//on récupère le reste de la chaine
			chntmp=chntmp.substring(max_carac,chntmp.length);
			tableau_result.push(Maxchn);
		}
		tableau_result.push(chntmp);
	}
	debug+="tableau_result : " +tableau_result+"\n";
 
	//////////////////////////////////////////////////////////////////////////////////////////////////////////	
	//on parcourt tableau_result pour réafficher le tableau 
	//Problème d'ajout des retour à la ligne pour le réaffichage
	//Il n'y a saut à la ligne que si pour tableau_result[i], il existe un tableau_result[i+1]
	//on connait la taille de tableau_result : tableau_result.length
	for (var i=0;i<tableau_result.length-1;i++)
	{
		debug+="i : " +i+"\n";
		// si on est à la fin du tableau on ne rajoute pas de \n
		if (i<tableau_result.length-1)
		{
			result+=tableau_result[i]+"\n";
		}
		else
		{
			result+=tableau_result[i];
		}
	}
	f.value=result;
	//il faut ajouter la dernière ligne du tableau
	debug+="result : \n" +result+"\n";
	//////////////////////////////////////////////////////////////////////////////////////////////////////////
 
	//////////////////////////////////////////////////////////////////////////////////////////////////////////
	// A NE SURTOUR PAS EVACER CETTE IDEE
	//////////////////////////////////////////////////////////////////////////////////////////////////////////
	//=> FAUX le but n'est pas de réafficher 
	//=> le but est de limiter le nombre de caractère 
	//et le nombre de ligne
	//il suffit donc juste de compter tableau_result qui à le bon nombre de ligne
	//retourner vrai si il est > nombre de ligne max
	//faux sinon
	//
	//debug+="tableau_result : " +tableau_result+"\n";
	//
	// if (tableau_result.length>max_ligne-1)
	// {
		// alert("max ligne atteint");
		// window.document.test.debug.value=debug;
		// return false;
	// }
	// else
	// {
		// window.document.test.debug.value=debug;
		// return true;
	// }
	//////////////////////////////////////////////////////////////////////////////////////////////////////////
	window.document.test.debug.value=debug;
}

avec ce dernier j'essaye de gérer ce cas pour un exemple avec un textarea limité à 10 caractères :

0123456789(saut de ligne implicite)
texte (\r\n)
texte 2(\r\n)

donne

0123456789(\r\n)
texte (\r\n)
texte 2(\r\n)

J'utilise une variable debug dans laquel je stock des informations que je réaffiche dans un textarea me permettant de voir si mon tableau_result se construit correctement.

Ca semble être le cas mais pas moyen de construire result et de le ré afficher dans mon textarea

Si qqn a une chtite idée je suis preneur.

Je retourne me triturer les méninges

++

[narutobaka]

Bonjour,

Bon il semble qu'une nuit de sommeil m'a fait du bien. J'ai en effet trouvé d'ou venait mon soucis.

Une simple bêtise dans mon parcourt de tout le tableau ou je ne prenais pas en compte la première ligne, la fatigue sans doute .

Donc voici mon tit script :

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
function limit_carac_max_ligne(f,texte)
{
	var tableau_result=new Array();
	var nl="\r\n";
	var max_carac=10; //nombre de caractère maximum par ligne
	var max_ligne=3;//nombre de ligne maximum
	var chntmp="";
	var Maxchn="";
	var result="";
	var debug="";
	//chaque ligne du tableau represente une ligne délimité par un \r\n
	var tableau=texte.split(nl);
	debug+="tableau : " +tableau+"\n";
	
	//pour chaque ligne 
	for(var i=0;i<tableau.length;i++)
	{
		//on recupère la ligne
		chntmp=tableau[i];
		//si une ligne utilise X lignes du textarea
		while (chntmp.length>max_carac)
		{
			//on recupère les max premiers caractères
			Maxchn=chntmp.substring(0,max_carac);
			//on récupère le reste de la chaine
			chntmp=chntmp.substring(max_carac,chntmp.length);
			tableau_result.push(Maxchn);
		}
		tableau_result.push(chntmp);
	}
	debug+="tableau_result : " +tableau_result+"\n";
	
	//////////////////////////////////////////////////////////////////////////////////////////////////////////	
	//on parcourt tableau_result pour réafficher le tableau 
	//Problème d'ajout des retour à la ligne pour le réaffichage
	//Il n'y a saut à la ligne que si pour tableau_result[i], il existe un tableau_result[i+1]
	//on connait la taille de tableau_result : tableau_result.length
	for (var i=0;i<=tableau_result.length-1;i++)
	{
		debug+="i : " +i+"\n";
		// si on est à la fin du tableau on ne rajoute pas de \n
		if (i<tableau_result.length-1)
		{
			result+=tableau_result[i]+"\n";
		}
		else
		{
			result+=tableau_result[i];
		}
	}
	f.value=result;
	//il faut ajouter la dernière ligne du tableau
	debug+="result : \n" +result+"\n";
	//////////////////////////////////////////////////////////////////////////////////////////////////////////
	window.document.test.debug.value=debug;
}

Me reste plus qu'à ajouter la limitation du nombre de ligne, donc rien de bien méchant.

Je posterai quand se sera fait

++

[narutobaka]

bonjour,

bon j'ai ajouter la gestion de la limitation du nombre de ligne lors de la saisit, pour gèrer les retour à la ligne implicite.

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
75
76
 
function limit_carac_max_ligne(f,texte)
{
	var tableau_result=new Array();
	var nl="\r\n";
	var max_carac=85; //nombre de caractère maximum par ligne
	var max_ligne=3;//nombre de ligne maximum
	var nb_ligne=0;
	var chntmp="";
	var Maxchn="";
	var result="";
	var chaine="";
	//chaque ligne du tableau represente une ligne délimité par un \r\n
	var tableau=texte.split(nl);
	var tableau_test=new Array();
 
	//pour chaque ligne 
	for(var i=0;i<tableau.length;i++)
	{
		//on recupère la ligne
		chntmp=tableau[i];
		//si une ligne utilise X lignes du textarea
		while (chntmp.length>max_carac)
		{
			//on recupère les max premiers caractères
			Maxchn=chntmp.substring(0,max_carac);
			//on récupère le reste de la chaine
			chntmp=chntmp.substring(max_carac,chntmp.length);
			tableau_result.push(Maxchn);
		}
		tableau_result.push(chntmp);
	}
//////////////////////////////////////////////////////////////////////////////////////////////////////////	
	//on parcourt tableau_result pour réafficher le tableau 
	//Problème d'ajout des retour à la ligne pour le réaffichage
	//Il n'y a saut à la ligne que si pour tableau_result[i], il existe un tableau_result[i+1]
	//on connait la taille de tableau_result : tableau_result.length
	for (var i=0;i<=tableau_result.length-1;i++)
	{
		// si on est à la fin du tableau on ne rajoute pas de \n
		if (i<tableau_result.length-1)
		{
			result+=tableau_result[i]+"\r\n";
		}
		else
		{
			result+=tableau_result[i];
		}
	}
	//////////////////////////////////////////////////////////////////////////////////////////////////////////
 
	//////////////////////////////////////////////////////////////////////////////////////////////////////////	
	//Limitation du nombre de ligne
	nbligne=compte_ligne(result);
	tableau=result.split(nl);
	if (nbligne>max_ligne-1)
	{
		for(var i=0;i<max_ligne;i++)
		{
			if (i<max_ligne-1)
			{
				chaine+=tableau[i]+'\r\n';
			}
			else
			{
				chaine+=tableau[i];
			}
		}
		f.value=chaine;
	}
	else
	{
	        tableau_test=result.split(nl);
	        f.value=result;
	}
}

Bon ce script à encore quelques lacunes :
- Il est impossible d'utiliser les flèche de direction dans le textarea si on veut ajouter du texte
- Si on veut insérer du texte le curseur se repositionne à la fin après la saisit d'un caractère
- Il ne gère pas la coupure des mots au niveau des espaces

++