[XHTML] limiter le nombre de caractere d'un textarea

04 avr. 2006, 00:50

Salut à tous

je souhaite limiter le nombre de caracteres à inscrir dans un textarea

est ce possible?

merci d'avance

04 avr. 2006, 08:06

C'est effectivement possible, mais avec du Javascript : exemple:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Limite le nombre de caractères d'un textarea</title>
<script type="text/javascript">
/* <![CDATA[ */
function limite(zone)
{
    var max = 20;
    if(zone.value.length >= max)
    {
        zone.value = zone.value.substring(0,max);
    }
    var reste = max - zone.value.length;
    var affichage_reste = 'Vous pouvez encore inscrire '+ reste +' caractères';
    document.getElementById('max_desc').innerHTML = affichage_reste;
}
/* ]]> */
</script>
</head><body>
<form name="menu1">
  <textarea name="zone2Text" cols="40" rows="10" onfocus="this.value='';" onkeyup="limite(this);" onkeydown="limite(this);">Votre texte ici.</textarea><br />
  <span id="max_desc"></span>
</form>
</body>
</html>

La page est complète en soi, teste-là et inspire toi pour faire ton propre code

04 avr. 2006, 11:13

Merci cyrano

je vais tester et je vous tient au courant

04 avr. 2006, 11:37

bon, tous fonctionne à meirveille ma j'aimerai regler un dernier detail:

au chargement de la page, j'aimerai faire en sorte que le span affiche le message avec la valeur max

j'ai bien essayer de rajouter ceci au textarea mais sans succes

Code : Tout sélectionner

onLoad="limite(this);"

comment puis-je faire?

04 avr. 2006, 11:46

"onload" ne peut être utilisé que dans la balise <body>.

Mets un texte directement entre les balises <span>, il sera remplacé par la fonction lorsque tu commenceras à envoyer du texte dans le textarea.

04 avr. 2006, 11:58

ok, merci

sinon j'avait fait ceci et çà marchai aussi

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Limite le nombre de caractères d'un textarea</title>
<script type="text/javascript">
/* <![CDATA[ */
function limite(zone)
{
    var max = 20;
    if(zone.value.length >= max)
    {
        zone.value = zone.value.substring(0,max);
    }
    var reste = max - zone.value.length;
    document.getElementById('max_desc').innerHTML = reste;
}
/* ]]> */
</script>
</head><body>
<form name="menu1">
  <textarea name="zone2Text" cols="40" rows="10"  onfocus="this.value='';" onkeyup="limite(this);" onkeydown="limite(this);">Votre texte ici.</textarea><br />
  <p>vous pouvez encore inscrire <span id="max_desc">20</span> caractères</p>
</form>
</body>
</html>

encore merci à toi cyrano

je met résolu

05 mai 2006, 18:20

me revoila dans ce vieux sujet car j'ai de nouveau un soucis

j'ai voulu externaliser le js de cyrano mais il ne fonctionne alors plus

j'ai fait comme ceci pour le remplacer dans <head>:

Code : Tout sélectionner

<link href="js/limite_txt.js" type="text/javascript" />

ça doit venir du innerHTML car mon url vers le js est correct...

si quelqu'un a une idée

05 mai 2006, 18:26

Non, on utilise <link> pour du CSS, mais pour un JavaScript, on fait:

Code : Tout sélectionner

<script type="text/javascript" src="./mes_scripts/mon_fichier.js"></script>

05 mai 2006, 18:54

ooops oui la honte

je l'avait deja fait en plus

ce qui est bizard c'est que IE à quand même reconnu qu'il y avait du JS sur ma page

enfin bref...

encore merci Cyrano

09 janv. 2007, 16:12

Salut,

J'ai un problème avec ce code. Je connais pas du tout le JS et je trouve completement idiot qu'on ne puisse pas limiter un

Code : Tout sélectionner

<textarea>

!
Je vous explique mon problème :

Lorsque je tape quelque chose dans le textarea, que je clique sur un autre champ et que je reclique dans le textarea tout disparait!
J'ai crus que c'étais à cause du

Code : Tout sélectionner

onfocus="this.value='';"

alors je l'ai viré pour tester mais ce n'est pas ca :/ Je capte pas, c'est trop bisar le JS! Encore pire que le php, lol

09 janv. 2007, 18:25

Sans voir ton code, impossible de voir où est l'erreur.

10 janv. 2007, 18:07

Coucou Cyrano,

J'ai recopié ton code en fait, celui que tu as donné au dessus!

10 janv. 2007, 18:56

si il y a un problème quelque part c'est pas dans ce code car je l'utilise depuis deja pas mal de temps et il fonctionne à merveille

le mieux serai de nous faire voir ton code complet...

question bonus: a tu essayé avec un autre navigateur? est ce que js est bien activer pour le navigateur?

11 janv. 2007, 13:45

Coucou,

Oui JS est bien activé, je suis sous internet explorer 7.
Voici le code tel que je l'ai recopié :

Code : Tout sélectionner

<html>
<head>
<title></title>
<script type="text/javascript"> 
/* <![CDATA[ */ 
function limite(zone) 
{ 
    var max = 500; 
    if(zone.value.length >= max) 
    { 
        zone.value = zone.value.substring(0,max); 
    } 
    var reste = max - zone.value.length; 
    var affichage_reste = '<font face="comic sans ms" size="2">Limite : 500. Il vous reste '+ reste +' caractères.</font>'; 
    document.getElementById('max_desc').innerHTML = affichage_reste; 
} 
/* ]]> */ 
</script>
</head>
<body>

<textarea name="message" cols="110" rows="11" style="font-family: comic sans ms; font-size: 10pt" onfocus="this.value='';" onkeyup="limite(this);" onkeydown="limite(this);"></textarea>
<br>
<span id="max_desc"></span>
</body>
</html>

Voila, dites moi si vous reperez une erreur

Edit ; j'ai rajouté les balises html pour pas que ca prete à confusion

11 janv. 2007, 14:46

Je viens de le tester aussi bien sur IE7 que sur Firefox 2 : ça fonctionne toujours...

Juste un détail : si tu quittes la zone de saisie et que tu veux y revenir pour corriger une faute par exemple...... ça vide la zone.

Solution : mets une valeur par défaut : dans le "onfocus", teste la valeur contenue dans la zone, si elle est égale à la valeur par défaut, tu vide, sinon, tu ne modifie rien.

[XHTML] limiter le nombre de caractere d'un textarea

Qui est en ligne