Limiter le nombre de caractère par ligne d'un textarea

**rantanplan08** · 31/12/2005, 12h44

Bonjour, j'ai créé un formulaire en php permettant d'envoyer un e-mail et j'ai donc au préalable une page htm contenant un formulaire qui envoie les infos au script php.

Dans le formulaire html, j'ai un champ de saisie de type textarea, pour le corps du message. J'aimerais pouvoir limiter le nombre de caractère par ligne que l'utilisateur peut entrer. Dès qu'il est atteint, il se produit un retour à la ligne.

Tout ce que je sais c'est qu'il faut un code javascript pour effectuer cela.

J'ai surfé un peu sur les différents sites pour trouver une réponse mais j'ai trouvé que pour limiter le nombre de caractères total :

impossible en html de limiter la taille d'un textarea il faut passer par javascript ou un script serveur

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
<html>
<head>
<script language="JavaScript">
//*** Paramètres
//*** texte : objet représentant le textarea
//*** max : nombre de caractères maximum
function CaracMax(texte, max)
{
if (texte.value.length >= max)
{
alert('Pas plus de ' + max + ' caractère(s) !!!') ;
texte.value = texte.value.substr(0, max - 1) ;
}
}
</script>
</head>
<body>
<form>
<textarea rows="20" cols="60" onKeyPress="CaracMax(this, 100) ;"></textarea>
</form>
</body>
</html>

--------------
ou encore

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
function checkLength(formulaire)
{
if (formulaire.txtarea.value.length<100)
{
formulaire.submit();
}
else
{
alert("Il y a trop de caractères dans ce textarea :o)) !! ");
}
}
</script>

cette fonction serait appelée comme ça, par un formulaire de cette forme là:

Code :

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

1
2
3
4
<form action="action.ext" >
<textarea name="txtarea" cols=35 rows=6></textarea>
<input type=button name=bouton value=Envoyer onclick=checkLength(this.form)>
</form>

Voici le code de ma page html qui contient le formulaire :

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
<html>
 
<head>
<title>Envoi d'un e-mail JMP Autos</title>
<meta name="generator" content="Namo WebEditor v5.0(Trial)">
</head>
 
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p align="center" style="margin-right:24;">&nbsp;</p>
<p align="center"><b>Envoi d'un e-mail JMP Autos</b></p>
<form method="post" action="mail_html.php">
<p style="margin-top:3; margin-bottom:2;" align="center"><b>E-mail 
    destinataire : </b><INPUT type="text" name="destinataire" size="50">
    <p style="margin-top:3; margin-bottom:2;" align="center"> <b>Sujet 
    de l'email : </b><INPUT type="text" name="sujet" size="50"></p>
    <table cellpadding="0" cellspacing="0" width="615" style="margin-top:3; margin-bottom:2;" align="center"><tr>
            <td width="160" valign="top">            
                    <p align="center" style="margin-top:3; margin-bottom:2;"><b>Corps 
                du message  :</b> </td>
            <td width="455">
<p align="center" style="margin-top:3; margin-bottom:2;"><textarea name="contenu" rows="9" cols="60"></textarea></p></td>
    </tr>
    </table>
    <p style="margin-top:3; margin-bottom:2; margin-left:302;" align="left">&nbsp;</p>
<p align="center" style="margin-top:3; margin-bottom:2;"><INPUT type="submit" value="Envoyer le message" / style="color:black; background-color:rgb(255,255,204); border-width:1px; border-color:black; border-style:solid;">&nbsp;</p> 
	       </form>                                                                                                                                                                                                  
</body>
 
</html>

Et le code de mon script php :

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
<?php
 
function tarea0($text) {
   $t=stripslashes($text);
   $t=str_replace("&","&amp;",$t);
   return str_replace("<","&lt;",$t);
}
 
function tarea($text) {
      return nl2br(tarea0($text));
      }
 
$destinataire = $_POST["destinataire"];
$expediteur = "**********";
$sujet = $_POST["sujet"];
$contenu = tarea($_POST["contenu"]);
$reponse = $expediteur;
 
echo "Envoi de l'e-mail à $destinataire"."<br />";
$codehtml=
        "<html><body>" .
        "<p align=\"center\"><img src=\"http://charmedsworld.free.fr/jmpautos/jmpautos.jpg\"></p>" .
        "<p align=\"center\"><b>****************</b></p>" .
        "<p align=\"center\"><b>tel : ***************</b></p>" .
        "<p align=\"center\"><b>www.jmpautos.fr.fm</b></p>" .
        "<br />" .
        "<br />" .
        "</body></html>";
        
$corpsdumessage=$codehtml.$contenu;
 
mail($destinataire,
     $sujet,
     $corpsdumessage,
     "From: $expediteur\r\nReply-To: $reponse\r\nContent-Type: text/html; charset=\"iso-8859-1\"\r\n");
 
echo "E-mail envoyé.";
 
?>

Quelqu'un peut m'aider ?
Merci

**spilliaert** · 31/12/2005, 14h23

pourquoi ne pas faire ceci:

tu définis le nombre de caractères de textarea avec l'attribut cols=x

tu fixes l'attribut wrap à physical

tu as donc ton message transmis au serveur avec x caractères par ligne, non???

@+

**..:: Atchoum ::..** · 31/12/2005, 14h27

Salut,

Voila monsieur....

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
 
<script language='javascript'>
var nb_max = 1000; 
 
function limite(objetarea,taille,res) 
{ 
if( (objetarea.value.length+1) >= (taille)) 
		objetarea.value = objetarea.value.substr(0,taille-1); 
res.value = (taille - (objetarea.value.length+1))	;
return ; 
} 
</script>
 
 
<textarea cols='70%' rows='8' name='description_proj' onkeypress="limite(this,nb_max,document.formu.compteur);" onchange="limite(this,nb_max,document.formu.compteur);" ></textarea>
 
<input type='text' name='compteur' value='1000' size='4' disabled >

A intégrer dans un formulaire de name "formu".
Avec un petit apercu dans un input type text en readonly !

La prochaine fois

merci

**rantanplan08** · 01/01/2006, 21h16

Oui dsl pour la balise mais je suis nouveau je savais pas.
Et merci pour le code !!!
@+

**siddh** · 01/01/2006, 21h17

pourrais tu clicker sur le bouton

en bas a gauche s'il te plait ?

**rantanplan08** · 02/01/2006, 16h05

Voilà c'est fait

**rantanplan08** · 02/01/2006, 16h23

Euh non finalement il est pas résolu vue que le code ne marche pas. En fait rien ne se passe, le compteur ne fait rien, donc rien n'as changé...

Voilà mon code au complet :

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
<html>
 
<head>
<title>Envoi d'un e-mail JMP Autos</title>
<meta name="generator" content="Namo WebEditor v5.0(Trial)">
</head>
 
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<script language='javascript'>
var nb_max = 1000;
 
function limite(objetarea,taille,res)
{
if( (objetarea.value.length+1) >= (taille))
      objetarea.value = objetarea.value.substr(0,taille-1);
res.value = (taille - (objetarea.value.length+1))   ;
return ;
}
</script>
<p align="center" style="margin-right:24;">&nbsp;</p>
<p align="center"><b>Envoi d'un e-mail JMP Autos</b></p>
<form name ="form" method="post" action="mail_html.php">
<script language='javascript'>
var nb_max = 1000;
 
function limite(objetarea,taille,res)
{
if( (objetarea.value.length+1) >= (taille))
      objetarea.value = objetarea.value.substr(0,taille-1);
res.value = (taille - (objetarea.value.length+1))   ;
return ;
}
</script>
<p style="margin-top:3; margin-bottom:2;" align="center"><b>E-mail 
    destinataire : </b><INPUT type="text" name="destinataire" size="50">
    <p style="margin-top:3; margin-bottom:2;" align="center"> <b>Sujet 
    de l'email : </b><INPUT type="text" name="sujet" size="50"></p>
    <table cellpadding="0" cellspacing="0" width="615" style="margin-top:3; margin-bottom:2;" align="center"><tr>
            <td width="160" valign="top">            
                    <p align="center" style="margin-top:3; margin-bottom:2;"><b>Corps 
                du message  :</b> </td>
            <td width="455">
<p align="center" style="margin-top:3; margin-bottom:2;"><textarea cols='70%' rows='8' name='description_proj' onkeypress="limite(this,nb_max,document.formu.compteur);" onchange="limite(this,nb_max,document.formu.compteur);" ></textarea></p></td>
    </tr>
    </table>
    <p align="center"><input type='text' name='compteur' value='1000' size='4' disabled ></p>
    <p style="margin-top:3; margin-bottom:2; margin-left:302;" align="left">&nbsp;</p>
<p align="center" style="margin-top:3; margin-bottom:2;"><INPUT type="submit" value="Envoyer le message" / style="color:black; background-color:rgb(255,255,204); border-width:1px; border-color:black; border-style:solid;">&nbsp;</p> 
	       </form>                                                                                                                                                                                                  
</body>
 
</html>

Si vous voulez tester, la page est enregistrée là : http://charmedsworld.free.fr/email.htm

Vous pouvez m'aider svp ?
Merci[/url]

**SpaceFrog** · 02/01/2006, 16h26

tiens j'avais ça en stock ...

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
<script language="javascript"> 
function gowrap(MonTexte,Longueur) 
{ 
TabTexte=new Array;
var CounterTab = 0;
 
MonTexte = MonTexte.split('<BR>')
MonTexte = MonTexte.join('')
 
if (Longueur<1)
 {
  alert('Entrez une Valeur ')
  return;
  }
 
else{
Longueur=Number(Longueur);
for (i=0; i<MonTexte.length; i+=Longueur)
{
 
 TabTexte[CounterTab] = MonTexte.slice(i,i +Longueur);
 CounterTab++;
}
document.getElementById('moi').innerHTML= TabTexte.join('<br />')
}
 
 
 
}
 </script> 
 
</head>
 
<body>
 
<input type="button" value="wrap" onclick="var MonTexte=document.getElementById('moi').innerHTML; var Lg=document.getElementById('Long').value; gowrap(MonTexte,Lg);">
<input type="text" size="2" maxLength="1" id="Long">
 
 
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td id="moi" width="100" style="font-weight:bold;">aaabbbcccdddeeefffggghhh</td>
    </tr>
  </table>
 
 
</body>
 
</html>

**Crazyblinkgirl** · 02/01/2006, 16h32

A intégrer dans un formulaire de name "formu".

Ton form se nomme "form" donc il ne trouve pas le compteur. D'où l'erreur javascript dès que tu écris dans ton textarea

**rantanplan08** · 02/01/2006, 17h18

C'est vrai l'erreur de "form" au lieu de "formu" bloquait le compteur. Mais sa ne fait toujours pas ce que je voulais pas que sa façe au début, c'est à dire limiter le nombre de caractère par ligne, de sorte à ce que quand j'arrive en écrivant à l'extrémité droite de mon cadre sa reparte à la ligne.

Sinon pour le code au dessus je vois pas comment sa peus me servir pour faire sa.

Merci

**SpaceFrog** · 02/01/2006, 17h44

pour mon code ?
ben si tu gère bien l'array tu peux controler ce que tu veux en affichage
sufiit ensuite de jouer un peu avec split et join ...

**rantanplan08** · 02/01/2006, 18h15

Oula j'avoue que j'y connais pas encore grand chose en javascript et que la le code j'ai pas trop compris comment sa tournait, alors de là à le modifier...
Merci

**rantanplan08** · 04/01/2006, 19h31

UP

Personne ne peus m'aider à modifier le code ?

Merci

Limiter le nombre de caractère par ligne d'un textarea

JavaScript

Discussions similaires

Partager

Partager