Page 1 sur 2
[XHTML] limiter le nombre de caractere d'un textarea
Posté : 04 avr. 2006, 00:50
par BeRoots
Salut à tous
je souhaite limiter le nombre de caracteres à inscrir dans un textarea
est ce possible?
merci d'avance

Posté : 04 avr. 2006, 08:06
par Cyrano
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

Posté : 04 avr. 2006, 11:13
par BeRoots
Merci cyrano
je vais tester et je vous tient au courant

Posté : 04 avr. 2006, 11:37
par BeRoots
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
comment puis-je faire?
Posté : 04 avr. 2006, 11:46
par Cyrano
"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.
Posté : 04 avr. 2006, 11:58
par BeRoots
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

Posté : 05 mai 2006, 18:20
par BeRoots
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>:
ça doit venir du innerHTML car mon url vers le js est correct...
si quelqu'un a une idée

Posté : 05 mai 2006, 18:26
par Cyrano
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>
Posté : 05 mai 2006, 18:54
par BeRoots
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

Posté : 09 janv. 2007, 16:12
par abricot
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
!
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
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
Posté : 09 janv. 2007, 18:25
par Cyrano
Sans voir ton code, impossible de voir où est l'erreur.
Posté : 10 janv. 2007, 18:07
par abricot
Coucou Cyrano,
J'ai recopié ton code en fait, celui que tu as donné au dessus!
Posté : 10 janv. 2007, 18:56
par BeRoots
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?
Posté : 11 janv. 2007, 13:45
par abricot
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
Posté : 11 janv. 2007, 14:46
par Cyrano
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.