CONTRÔLE DU NOMBRE DE CARACTÈRES DANS UN CHAMPS TEXTAREA textarea, onkeyup, onkeypress, onchange, caractère, Source N°38494

Information sur la source

Catégorie :Formulaire Classé sous : textarea, onkeyup, onkeypress, onchange, caractère Niveau : Débutant Date de création : 09/07/2006 Date de mise à jour : 09/07/2006 02:02:16 Vu : 11 092

Auteur : masternico

Ecrire un message privé

Note :
Aucune note

Commentaire sur cette source (5)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

Bonjour, alors que je suis en train de coder un portail de petites annonces, il m'est devenu nécessaire de contrôler que l'utilisateur ne dépassait pas le nombre de caractères autorisés, et ce, alors qu'il est en train de tapper son texte. J'en ai trouvé quelques exemples, mais il me semblaient trop long et pas assez souple d'utilisation. C'est donc pourquoi j'y vais de ma propre plume et que j'écris mon premier code java que je partage volontier avec vous tous, qui m'avez aidé sans le savoir à certain moment.Le code est composé de trois petites fonctions qui gèrent chacune un type évennement clavier:
-- function verif_press gère quand l'utilisateur enfonce une touche, mais plus spécialement quand il la maintient enfoncée.
-- function verif_change gère quand l'utilisateur sort du TEXTAREA et le bloquera tant que le nombre de caractère dépassera celui autorisé. (lors d'un copy/past, le TEXTAREA peut dépasser la valeur autorisée)
-- function show_nb_car se contente d'inscrire le nombre de caractères dans un champs de contrôle. Elle est invoqué l'orsque l'utilisateur relache la touche.

Petite expliquation du formulaire. Le TEXTAREA à contrôler va de paire avec son champ de contrôle. Pour l'exemple, l'un s'appelle "suite", l'autre "nb_car_suite". Lors de l'appel aux fonctions, "this" correspond au TEXTAREA lui même, "document.text.nb_car_suite fait référence au champs de contrôle, 800 est le nombre maxi autorisé.

<TEXTAREA name="suite" rows="13" cols="80" onKeyup="show_nb_car(this,document.text.nb_car_suite)" onKeypress="return verif_press(this,800,document.text.nb_car_suite)" onchange="return verif_change(this,800)" ><?php echo $_SESSION['annonce'][27]; ?></TEXTAREA><br>
<span class="VertSmall">Nombre de caractères de ce champs : <input type="text" name="nb_car_suite" size="3" value="<?php echo strlen($_SESSION['annonce'][27]); ?>"> / 800 max.</span><br>

Il est évident qu'il manque la partie de traitement du formulaire pour quand l'utilisateur clique sur le bouton, mais cela ne fait pas partis du sujet de ce code.

Voila, bon code à vous tous...

Source

<head>
// textarea est la référence du TEXTAREA à contrôler, max en est la valeur maximal, count est la référence
// du champs texte de contrôle où s'affichera le nombre de caractère en cour
function verif_press(textarea,max,count) // vérifie que le nombre maxi n'a pas été atteint pendant que l'utilisateur reste appuyé sur la touche
{
if (textarea.value.length > max -1){ //s'il dépasse la taille requise, on sort
return false;
}
else { // sinon
count.value = textarea.value.length +1 ; // on met à jour le champs de contrôle.
return true;
}
}
// textarea est la référence du TEXTAREA à contrôler, max en est la valeur maximal, pour cette fonction count n'est pas inclu
// car lorsqu'elle est appellée, le nombre de caractère a déja été inscrit lors de l'évenement "onkeyup"
function verif_change(textarea,max) // vérifie que le nombre maxi n'a pas été atteint lorsque l'utilisateur sort du champs
{
if (textarea.value.length > max ){ // s'il dépasse la taille requise, on prévient et on sort
alert('Vous ne pouvez rentrer que '+ max +' caractères maximum pour ce champs');
return false;
}
else return true; // sinon, on continu
}
// textarea est la référence du TEXTAREA à contrôler, count est la référence
// du champs texte de contrôle où s'affichera le nombre de caractère en cour. Cette fonction est appelée lors de l'évenement "onkeyup"
function show_nb_car(textarea,count)
{
count.value = textarea.value.length;
return true;
}
</script>
</head>
<body>
<form name="text" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<span class="BlancLarge">Début de votre texte : </span><br>
<TEXTAREA name="rappel" rows="4" cols="80" onKeyup="show_nb_car(this,document.text.nb_car_rappel)" onKeypress="return verif_press(this,200,document.text.nb_car_rappel)" onchange="return verif_change(this,200)" ><?php echo $_SESSION['annonce'][2]; ?></TEXTAREA><br>
<span class="VertSmall">Nombre de caractères de ce champs : <input type="text" name="nb_car_rappel" size="3" value="<?php echo strlen($_SESSION['annonce'][2]); ?>"> / 200 max.</span><br><br>
<span class="BlancLarge">Suite de votre texte : </span><br>
<TEXTAREA name="suite" rows="13" cols="80" onKeyup="show_nb_car(this,document.text.nb_car_suite)" onKeypress="return verif_press(this,800,document.text.nb_car_suite)" onchange="return verif_change(this,800)" ><?php echo $_SESSION['annonce'][27]; ?></TEXTAREA><br>
<span class="VertSmall">Nombre de caractères de ce champs : <input type="text" name="nb_car_suite" size="3" value="<?php echo strlen($_SESSION['annonce'][27]); ?>"> / 800 max.</span><br>
<input type="hidden" name="mode" value="<?php echo _ACTION_; ?>"><br>
<span class="BlancMedium">Pour valider et enregistrer votre texte : </span><input type="submit" value="Cliquez ici">
</form>
</body>

<head>
// textarea est la référence du TEXTAREA à contrôler, max en est la valeur maximal, count est la référence 
// du champs texte de contrôle où s'affichera le nombre de caractère en cour

function verif_press(textarea,max,count)        // vérifie que le nombre maxi n'a pas été atteint pendant que l'utilisateur reste appuyé sur la touche
{
        if (textarea.value.length > max -1){     //s'il dépasse la taille requise, on sort 
            return false;
        }
        else {                                   // sinon
            count.value = textarea.value.length +1 ;    // on met à jour le champs de contrôle.
            return true;
        }
}

// textarea est la référence du TEXTAREA à contrôler, max en est la valeur maximal, pour cette fonction count n'est pas inclu 
// car lorsqu'elle est appellée, le nombre de caractère a déja été inscrit lors de l'évenement "onkeyup"

function verif_change(textarea,max)        // vérifie que le nombre maxi n'a pas été atteint lorsque l'utilisateur sort du champs
{
        if (textarea.value.length > max ){     // s'il dépasse la taille requise, on prévient et on sort
            alert('Vous ne pouvez rentrer que '+ max +' caractères maximum pour ce champs');
            return false;
        }
        else return true;                 // sinon, on continu
}

// textarea est la référence du TEXTAREA à contrôler, count est la référence 
// du champs texte de contrôle où s'affichera le nombre de caractère en cour. Cette fonction est appelée lors de l'évenement "onkeyup"
function show_nb_car(textarea,count)
{
            count.value = textarea.value.length;
            return true;
}


</script>

</head>
<body>
<form name="text"  method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>"> 
<span class="BlancLarge">Début de votre texte : </span><br>
<TEXTAREA name="rappel" rows="4" cols="80"  onKeyup="show_nb_car(this,document.text.nb_car_rappel)" onKeypress="return verif_press(this,200,document.text.nb_car_rappel)"  onchange="return verif_change(this,200)" ><?php echo $_SESSION['annonce'][2]; ?></TEXTAREA><br>
<span class="VertSmall">Nombre de caractères de ce champs : <input type="text" name="nb_car_rappel" size="3" value="<?php echo strlen($_SESSION['annonce'][2]); ?>"> / 200 max.</span><br><br>
<span class="BlancLarge">Suite de votre texte : </span><br>
<TEXTAREA name="suite" rows="13" cols="80" onKeyup="show_nb_car(this,document.text.nb_car_suite)" onKeypress="return verif_press(this,800,document.text.nb_car_suite)" onchange="return verif_change(this,800)" ><?php echo $_SESSION['annonce'][27]; ?></TEXTAREA><br>
<span class="VertSmall">Nombre de caractères de ce champs : <input type="text" name="nb_car_suite" size="3" value="<?php echo strlen($_SESSION['annonce'][27]); ?>"> / 800 max.</span><br>
<input type="hidden" name="mode" value="<?php echo _ACTION_; ?>"><br>
<span class="BlancMedium">Pour valider et enregistrer votre texte : </span><input type="submit" value="Cliquez ici">
</form>
</body>

Historique

09 juillet 2006 01:51:50 :: Changement de la capture d'écran
09 juillet 2006 02:02:16 :: J'avais oublié un double-quote pour un commentaire

Sources de la même categorie

Toutes les sources de la catégorie Formulaire

Sources en rapport avec celle ci

Commentaires

Commentaire de pagis78 le 16/07/2006 17:56:20

Code bcp trop spécifique à ton portail.
Commentaire de masternico le 17/08/2006 23:32:49

Il me semblait au contraire que cela permettait une intégration dans n'importe quel code. Me serais-je trompé?
C'est possible.
Commentaire de dda45 le 20/11/2006 17:43:02

J'ai fais un script sensblement pareil (sauf que j'utilise la méthode blur()) mais il reste un problème que ce script a aussi, lorsque que l'on arrive à 200 caractères ... Plus moyen d'en supprimer un !!! Comment faire ???
Commentaire de masternico le 15/12/2006 12:31:24

Salut, excusez moi de ne pas avoir répondu plus tôt. Je suis plus sur php et j'avais oublié que j'avais posté un source ici.

>>lorsque que l'on arrive à 200 caractères ... Plus moyen d'en supprimer un !!! Comment faire ???

Je n'ai pas ce problème là. Quand j'arrive au nombre de caractères maxi, la frappe est annulée, mais l'effacement reste possible. C'est bizare. As tu testé mon script?
Commentaire de Neustradamus le 16/02/2007 10:42:18

J'ai même problème, blocage à 200 ou 800 : normal, mais suppression après impossible.

Ajouter un commentaire

Discussions en rapport avec ce code source

Récupérer la position du curseur dans un TEXTAREA par piment

test par alcatraz

URGENT: position du curseur dans un TEXTAREA ??? par Kiom

Compter le nombre de caractère par Titrax

Ecrire l'heure dans une textarea par c0nquer

comment écrire dans un textarea ?? par moudj

Textarea = WYSIWYG éditeur HTML par Blasteur

textarea = WYSIWYG éditeur HTML par Blasteur

Bloquer un textarea par hicksman

Insérer un fichier dans un textarea par CyberB