bloquer saisie d une textarea

Version imprimable

03/02/2006, 17h45
jeanPaul

bloquer saisie d une textarea

bonjour,

j aimerai bloquer la saisie d une texteArea a un nombre de ligne limité et limité le nombre de charactere par ligne :

soit par exemple 5 Lignes max et 10 characteres max par lignes ; les deux parametres sont important ; j ne dois pas avoir plus de 5 lignes , et je ne dois pas avoir des lignes trop longue , si qql un peut m aider .

sinon , comment faire pour découper une chaine en tableau de sous chaine avec comme délimiteur \n , car cela pourrai m aider dans la résolution du 1er pb .

Merci par avance
03/02/2006, 17h50
franculo_caoulene

Si c'est uniquement pour IE une source a déjà été donnée dans le forum.
04/02/2006, 20h45
jeanPaul

hormis le blocage d un champs texArea a un certains nombres de char , je n ai pas trouver la réponse a ma recherche ... :(

Personne n as ne serait ce qu une piste ? ou une regEx qui me permette d isoler les phrases par /n ?

qql peut me dire pourkoi ca marche pas ce code ?
je ne comprend pas pk qd je met un "debut" a mon indexOf , celui ci ne marche plus et me retourne tjrs -1 ?????
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 function test(c) { var s,n1,n2; n1=0; n2=0, s=c.value; while(s.length != -1 ) { s = c.value; n1 = s.indexOf(n2,'\n'); alert(n1); n2 = s.indexOf(n1,'\n'); alert(n2); s = s.substring(n1,n2); if( n1 == n2) break; alert(s); } }

04/02/2006, 23h50
siddh

Re: bloquer saisie d une textarea

Citation:

Envoyé par jeanPaul

sinon , comment faire pour découper une chaine en tableau de sous chaine avec comme délimiteur \n , car cela pourrai m aider dans la résolution du 1er pb .

a mon avis c est la meilleur solution, decouper en chaines sur le \n et tester le length.

regardes la methode split des chaines ;)
04/02/2006, 23h51
jeanPaul

le nasibus , j ai inverser mes parametres et mit (n2,'\n') au lieu de: ('\n',n2) ... :( 8)
04/02/2006, 23h53
siddh

fais un split plutot tu te prendra moins la tete
05/02/2006, 00h00
jeanPaul

hey po mal la methode split , reste plus qu as voir comment l exploité correctemenr , merci pour l info
05/02/2006, 00h03
siddh

ben ca va te renvoyer un tableau et t as plus qu'a tester le length de chacune des cases ;)

je bloque sur ca now :

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
 
function test(c)
{
 
var s,s2,n1,n2;
n1=0;
n2=0,
 
s=c.value;
 
		s = c.value;
		s= s.split('\n');
		s2 = new Array(6);
		for(i=0;i<s.length;i++)
		{
 
			if(i==5)
				return false;
 
			if(s[i].length>3)
			{					
 
				s2=s;
 
				//décale tout d une ligne tant que l ont dépasse pas 5 lignes , sinon on bloque
				for(j=i;j<s.length;j++)
				{
					s2[j+1]=s[i];
				}
			}
		}
 
	c.value=s2;
	return true;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
function test(c)
{
   s = c.value;
 
   var tab = s.split('\n');
   if(tab.length > 5)
      return false;
 
   for(i=0;i<tab.length;i++)
   {
         if(tab[i].length>10){
             alert('plus de 10 char sur la ligne '+i);
             return false;
         }
   }
    // c est ok
    return true;
}

05/02/2006, 00h53
jeanPaul

il faudrai que se soit transparent , en gros , je veut faire comme pour la saisie d un SMS sur un portable , exactement la meme choses ...

Citation:

Envoyé par siddh

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
function test(c)
{
   s = c.value;
 
   var tab = s.split('\n');
   if(tab.length > 5)
      return false;
 
   for(i=0;i<tab.length;i++)
   {
         if(tab[i].length>10){
             alert('plus de 10 char sur la ligne '+i);
             return false;
         }
   }
    // c est ok
    return true;
}

et ca le pb est que ca me bloque des qu une ligne est a 10 caractere , alors que la il faudrai que je le mette a la ligne d ou l idée de tableau qui se decale d une ligne ...

05/02/2006, 01h09
siddh

tu veux faire quoi exactement ?
pas trop compris l'idée du retour a la ligne avec le decalage :oops:
05/02/2006, 01h13
jeanPaul

en gros , il faut que je limite la saisie a 10 char par ligne et 5 ligne :

si il ecrit , il ne doit pas avoir d alerte tant qu il n as pas atteint les 5 ligne , et si il dépasse 10 char , il faut rajouter un retour chariot automatiquement , si il revient sur sa saisie en milieu de phrases , il faut faire un 'insert' , et décalé les lignes précédante vers le bas , mais c est en gros l equivalence de la saisie d un sms , avec pour seul action de l empeché de siasir plus qu il ne peut

j en suis pas tres loin mais ca bug un peu , help

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
 
 
function test(c)
{
 
var s,s2,n1,n2;
n1=0;
n2=0,
maString='';
 
s=c.value;
 
		s = c.value;
		s= s.split('\n');
		s2 = new Array(6);
 
 
		for(z=0;z<s.length;z++)
		{
			s2[z]=s[z];
		}
 
		for(i=0;i<s.length-1;i++)
		{
 
			if(i==5)
				return false;
 
			if(s[i].length>3)
			{					
 
				//décale tout d une ligne tant que l ont dépasse pas 5 lignes , sinon on bloque
				for(j=i;j<s.length-1;j++)
				{
					if(j>0)//max de 4 cahr par ligne
					 s2[j]=s2[j-1].substring(4,5)+'\n'+s[j].substring(0,4);
				}
			}
 
		}
 
	for(k=0;k<s2.length-1;k++)
	{
		if(s2[k] != null)
			maString += s2[k];
	}
	c.value='';	
	c.value=maString ;
	return true;
}

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
 
<script type='text/javascript'>
function test(e)
{
 
	var c = document.getElementById('texta');
	var tailleMax = document.all ? 57 : 54;
 
	if(c.value.length > tailleMax){
		if(document.all)
			window.event.keyCode = 0;
		else{
			e.returnValue = false;
			e.preventDefault();
		}
 
		return false;
	}
 
	tab = c.value.split('\n');
 
 
	if(document.all)
		limit = 10+((tab.length-1)*10)+((tab.length-1)*2);
	else
		limit = 10+((tab.length-1)*10)+(tab.length-1);
 
	if(c.value.length == limit)
		c.value += '\n';
 
 
} 
window.onload = function(){
	if(!document.all)
		document.getElementById('texta').addEventListener("keypress",test,false);
}
</script>
<textarea id='texta' rows="10" cols="20" onkeypress="test()"></textarea>

05/02/2006, 13h56
jeanPaul

c est pas mal du tout comme code ca , mais le seul ptit pb est que si l utilisateur entre un retour chariot avant le nb max de char par ligne la ligne suivant dépase le nb max et si si il rempli tout puis supprime une ligne au milieu et la remplace , le retour chariot se met a la fin au lieu de a la suite de la ligne modiifé en cours ...
05/02/2006, 14h00
siddh

ben essayes d'adapter ce que j'ai fait ;)
05/02/2006, 14h45
jeanPaul

Citation:

Envoyé par siddh

ben essayes d'adapter ce que j'ai fait ;)

j essaye , j essaye ...MAis je n ai pas de débuger et c chaud sans débugeur de voir ce qui se passe en interne ..., va falloir que je passe a mozila et son super debugeur javascript ( celui d ie et bien mais inclus dans je sais po koi , je l ai au taf seulement )

ca , ca marche ( hormis le 1er retour chariot qu il faut faire soit meme , mais ca encore c un détail )

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
 
<html>
 
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
 
<script type='text/javascript'>
function test(c) 
{        
 
var s=''; 
var maString ='';
s=c.value; 
 
      s = c.value; 
 
      if(s.lastIndexOf('\n') == '-1' && s.length >= 3 )
      {
      	s=s.substring(0,3)+'\n'+s.substring(3,s.length);
      	c.value = s;
      }
 
      s= s.split('\n'); 
 
      for(j=0;j<s.length;j++) 
      { 
            	//si nb char par ligne > 3 	
				//max de 3 char par ligne
               if(s[j].indexOf('\r') > 3 || (s[j].indexOf('\r')=='-1' && s[j].length>3) )
               {
 
               		if(s[j+1]==null)
               		{
               			s[j+1]=s[j].substring(3,s[j].length);
               		}
               		else
               		{
               			s[j+1]=s[j].substring(3,4)+s[j+1].substring(0,3);
               		}
 
               	 	s[j] = s[j].substring(0,3)+'\n';
 
                } 
      } 
 
   for(k=0;k<s.length ;k++) 
   { 
      if(s[k] != null) 
         maString += s[k]; 
   } 
 
   c.value=maString ;
 
   return true; 
} 
</script>
 
</head>
 
<body>
 
<form name="formulaire" method="POST" action="--WEBBOT-SELF--" onSubmit="location.href='_derived/nortbots.htm';return false;" webbot-onSubmit >
  <!--webbot bot="SaveResults" u-file="_private/form_results.csv" s-format="TEXT/CSV" s-label-fields="TRUE" startspan --><input TYPE="hidden" NAME="VTI-GROUP" VALUE="0"><!--webbot bot="SaveResults" endspan i-checksum="43374" --><p>&nbsp;</p>
  <p>&nbsp;</p>
  <p><textarea name='texta' rows="10" cols="20" onkeyup="return test(this)"></textarea></p>
  <p>&nbsp;</p>
  <p><input type="submit" value="Envoyer" name="B1"><input type="reset" value="Rétablir" name="B2"></p>
</form>
 
</body>
 
</html>

le GROS pb est que bah le curseur se place a la fin a chaque fois et ca c reloux ....HELP

correction pour la 1er ligne :

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
 
<html>
 
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
 
<script type='text/javascript'>
function test(c) 
{        
 
var s=''; 
var maString ='';
s=c.value; 
ligne1 = false;
 
      s = c.value; 
 
      if(s.indexOf('\r') == '-1' && s.length > 3 )
      {
      	s=s.substring(0,3)+'\r'+s.substring(3,4);
      	c.value = s;
      	ligne1 = true;
      }
 
      s= s.split('\n'); 
 
      for(j=0;j<s.length;j++) 
      { 
            	//si nb char par ligne > 3 	
				//max de 3 char par ligne
               if(s[j].indexOf('\r') > 3 || (s[j].indexOf('\r')=='-1' && s[j].length>3) )
               {
 
               		if(s[j+1]==null)
               		{
               			s[j+1]=s[j].substring(3,s[j].length);
               		}
               		else
               		{
               			s[j+1]=s[j].substring(3,4)+s[j+1].substring(0,3);
               		}
 
               	 	s[j] = s[j].substring(0,3)+'\n';
 
                } 
      } 
 
   for(k=0;k<s.length ;k++) 
   { 
      if(s[k] != null) 
         maString += s[k]; 
   } 
 
	if(!ligne1)  
   		c.value=maString ;
 
   return true; 
} 
</script>
 
</head>
 
<body>
 
<form name="formulaire" method="POST" action="--WEBBOT-SELF--" onSubmit="location.href='_derived/nortbots.htm';return false;" webbot-onSubmit >
  <!--webbot bot="SaveResults" u-file="_private/form_results.csv" s-format="TEXT/CSV" s-label-fields="TRUE" startspan --><input TYPE="hidden" NAME="VTI-GROUP" VALUE="0"><!--webbot bot="SaveResults" endspan i-checksum="43374" --><p>&nbsp;</p>
  <p>&nbsp;</p>
  <p><textarea name='texta' rows="10" cols="20" onkeyup="return test(this)"></textarea></p>
  <p>&nbsp;</p>
  <p><input type="submit" value="Envoyer" name="B1"><input type="reset" value="Rétablir" name="B2"></p>
</form>
 
</body>
 
</html>

05/02/2006, 20h04
jeanPaul

toujours meme pb : le curseur se place a la fin a chaque fois

Bon ; l idée et de mettre le champs formater dans une variable globale afin d avoir la mise en forme qui nous permet de suivre le nb de ligne ,

voici le code ( qql peu bugué a mort lol )

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
109
110
111
112
113
114
 
<html>
<head>
 
<script type='text/javascript'>
 
 
var t = "";
 
function trim(val)
{
    var retour = "" ;
    for(i=0;i < val.length;i++) 
        if(val.charAt(i) != '\n' && val.charAt(i) != '\r')
        { 
            retour += val.charAt(i) ;
        } 
    return retour ;
}
 
function test(c) 
{        
 
if( trim(t).length > trim(c.value).length )
	t = c.value;
 
ligne1 = false;
var s; 
maString=''; 
 
      s = t + c.value.charAt(c.value.length-1); 
 
      if(s.lastIndexOf('\n') == '-1' && s.length > 3 )
      {
      	s=s.substring(0,3)+'\n'+s.substring(3,s.length);
      	t = s;
      	ligne1 = true;
      }
 
      s= s.split('\n'); 
 
      for(j=0;j<s.length;j++) 
      { 
			//si nb char par ligne > 3 	
			//max de 3 char par ligne
		   if(s[j].indexOf('\r') > 3 || (s[j].indexOf('\r')=='-1' && s[j].length>3) )
		   {
 
				if(s[j+1]==null)
				{
					//s[j+1]=s[j].substring(3,s[j].length);
					s[j+1]=s[j].substring(3,4);
				}
				else
				{
					s[j+1]=s[j].substring(3,4)+s[j+1].substring(0,3);
				}
 
				s[j] = s[j].substring(0,3)+'\n';
 
			} 
      } 
 
   for(k=0;k<s.length;k++) 
   { 
      if(s[k] != null) 
         maString += s[k].substring(0,3); 
 
      if(s[k].length >= 3)
      	maString += '\n';
   } 
 
	//if(!ligne1) 
	//{
		t=maString;
	//}
 
} 
 
function test2(c)
{
 
if( trim(t).length > trim(c.value).length)
	t = test(c.value);
 
	//touche supr et del autorisé dans tout les cas
	if(event.keyCode == '8' || event.keyCode == '34')
		return true;
 
	var y ='';
	y = t.split('\n');
 
	if(y.length > 5 || ( y[4] != null && y[4].length >= 3 ) )
		return false
	else if(y.length <= 5 )
		return true;
}
</script>
 
</head>
 
<body>
 
<form name="formulaire" method="POST" action="--WEBBOT-SELF--" onSubmit="location.href='_derived/nortbots.htm';return false;" webbot-onSubmit >
  <!--webbot bot="SaveResults" u-file="M:\_private\form_results.csv" s-format="TEXT/CSV" s-label-fields="TRUE" startspan --><input TYPE="hidden" NAME="VTI-GROUP" VALUE="0"><!--webbot bot="SaveResults" endspan i-checksum="43374" --><p>&nbsp;</p>
  <p>&nbsp;</p>
  <p><textarea name='texta' rows="10" cols="20" onkeydown="return test2(this)"  onkeyup="return test(this)"></textarea></p>
  <p>&nbsp;</p>
  <p><input type="submit" value="Envoyer" name="B1"><input type="reset" value="Rétablir" name="B2"></p>
</form>
 
</body>
 
</html>

la je perd ma var a un moment donnée que je n ai pas cerné et du tout je remet po tout en forme et du coup ca passe a plus de N lignes autorisées ...mais je pense que l idée est là , si qql peut m aider ?

06/02/2006, 14h27
SpaceFrog

jsue au passage ... évitez les noms reservés du langage javascript pour des noms de fonctions ou de variables !

test est un mot reservé de javascript !
06/02/2006, 16h16
jeanPaul

Citation:

Envoyé par SpaceFrog

jsue au passage ... évitez les noms reservés du langage javascript pour des noms de fonctions ou de variables !

test est un mot reservé de javascript !

tu es sure ?? ca sert a quoi et ca s utilise comment ???
02/03/2006, 17h55
jeanPaul

personne ??
02/03/2006, 21h13
m@t

Sauf erreur de ma part, je ne pense pas que test soit un mot réservé par le langage Javascript.

Voici plusieurs liens listant ces mots proscrits :

http://www.carto.net/help/selfhtml_8...ge/reserve.htm

http://fr.wikibooks.org/wiki/Program...%A9serv%C3%A9s

Il est possible que ces listes ne soient pas exhaustives, pourtant, il ne me semble jamais avoir lu ou entendu que test était un mot réservé ...
02/03/2006, 23h22
Hephaistos007

Nous t'avons déjà répondu ici : http://www.developpez.net/forums/viewtopic.php?t=452432 :?
03/03/2006, 08h28
SpaceFrog

m@t pour ta culture personnelle ..
ce n'est pas parceque d'autre font l'erreur d'utiliser des mots réservés qu'il faut les suivre ...

http://www.devguru.com/Technologies/ecmascript/quickref/regexp_test.html
07/03/2006, 10h34
jeanPaul

Citation:

Envoyé par SpaceFrog

m@t pour ta culture personnelle ..
ce n'est pas parceque d'autre font l'erreur d'utiliser des mots réservés qu'il faut les suivre ...

http://www.devguru.com/Technologies/ecmascript/quickref/regexp_test.html

c est une methode de "classe" ( facon de parler n est ce pas , on sait que javascript n est pas OO )

mais RegExp.test c est pas pareil que test !!! ( MaClasse.MaMethode ) ...

pour la solution fourni en algo , elle n'est pas utilisable totalement en l etat ...