|
 Trouver une ressource
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !
 CONTRÔLE DU NOMBRE DE CARACTÈRES DANS UN CHAMPS TEXTAREA
 Information sur la source
 Description
Nouvelle version beaucoup plus performante que l'ancienne. La mise en place de la demande de contrôle d'un textarea ne se fait plus du tout de la même manière. /*Compatible avec firefox et IE*/ Avant, il fallait mettre les attibuts onkeypress, etc... directement dans le textarea concerné, mais celà alourdissait le code et ne simplifiait pas les choses en cas de modifs. Maintenant, c'est l'objet document qui est détourné et ensuite, quand nous sommes dans la procédure de contrôle, on vérifie que la cible est bien à contrôler (cf. function verif_textarea_length()). Sinon, on sort directement. Tout se passe dans le <TEXTAREA>: <TEXTAREA id="rappel" rows="4" cols="80" maxlength="200" control_length="1" id_control_cell="counter"></TEXTAREA> En fait, chose que je ne savait il y a 3 ans, c'est que l'on peut mettre des attributs personnalisés sur les éléments HTML. C'est super pratique pour passer des arguments d'appels à une procédure. Ici, je renseigne la l'attribut maxlength qui represente la taille maxi et qui sera traitée dans le script. l'attribut control_length est un booléen qui set a savoir si l'on veux controler ou pas sa taille. Celà peut par exemple être utilise si dans un cas vous voulez inicialement mettre un contrôl de taille sur le champs puis l'enlever en cour de route, il suffira juste de changer la valeur de l'attibut de 1 à 0. L'attribut id_cell_control est la valeur de l'attibut 'id' de la div de control ou va apparaître la taille du texte: <div id="counter" style="display:inline">0</div>/ 200 max. Merci.
 Source
- <head>
- <script type="text/javascript">
-
- //Nicolas LE DREFF 2009
- //Version 2
- //ce code est visible à l'adresse suivante:
- //http://www.javascriptfr.com/code.aspx?ID=38494
-
- // cette fonction est appelée à chaque fois que l'on tape sur une touche (onkeypress,onkeyup), que l'on quite un champ(onblur).
- // l'aiguillage se fait à l'intérieur.
- // A savoir: si l'élément d'éclencheur de l'évenemment a un attibut nomé 'control_length' et qu'il est mis à 1, alors on traite l'évenement,
- // sinon, on passe la main
- function verif_textarea_length(e)
- {
- var target = e.target || e.srcElement; // récupération de la cible
- var is_something_wrong = false; // initialisation variable
-
- if ((target.attributes) && (target.attributes['control_length']) && (target.attributes['control_length'].value = '1')) // 'control_length'?
- {
- max = target.attributes['maxlength'].value; //récupération de la valeur maxlength de la cible
- id_textarea = target.attributes['id'].value; //récupération de la valeur id de la cible
- id_control_cell = target.attributes['id_control_cell'].value; //récupération de la valeur id de la div pour le compteur
-
- textarea = document.getElementById(id_textarea); //assignation du textarea dans un objet plus accessible
- if (textarea.value.length > max) //est-ce que la taille du texte est trop grande?
- {
- //oui, on affiche un message et on découpe ce qui traine après la limite
- alert('Vous ne pouvez rentrer que '+ max +' caractères maximum pour ce champs');
- textarea.value=textarea.value.substring(0,max);
- is_something_wrong = true; // on prévient à la sortie que qque chose ne s'est pas bien passé
- }
- show_counter_value(id_control_cell,textarea.value.length); //on affiche la taille du texte
- }
- return (!is_something_wrong); //retour à l'envoyeur
- }
-
- // affiche le nombre de caractères du textarea
- //rien de bien compliqué
- function show_counter_value(id_control_cell,counter_value)
- {
- control_cell_div = document.getElementById(id_control_cell);
- control_cell_div.innerHTML = counter_value ; // on met à jour le champs de contrôle.
- return true;
- }
-
- //mise en place des gachettes (triggers en anglais)
- function set_callback_events()
- {
- if (document.addEventListener){
- // alert('FF');
- document.addEventListener('keypress', verif_textarea_length, false);
- document.addEventListener('keyup', verif_textarea_length, false);
- document.addEventListener('blur', verif_textarea_length, false);
- } else if (document.attachEvent){
- // alert('IE');
- document.attachEvent('onkeypress', verif_textarea_length);
- document.attachEvent('onkeyup', verif_textarea_length);
- document.attachEvent('onblur', verif_textarea_length);
- }
- }
-
- </script>
-
- </head>
- <body onload="set_callback_events()">
- <form name="text" method="POST" action="">
- <span class="BlancLarge">Début de votre texte : </span><br>
- <TEXTAREA id="rappel" rows="4" cols="80" maxlength="200" control_length="1" id_control_cell="counter"></TEXTAREA><br>
- <span class="VertSmall">Nombre de caractères de ce champs : <div id="counter" style="display:inline">0</div>/ 200 max.</span><br><br>
- <input type="hidden" name="mode" value="submit"><br>
- <span class="BlancMedium">Pour valider et enregistrer votre texte : </span><input type="submit" value="Cliquez ici">
- </form>
- </body>
<head>
<script type="text/javascript">
//Nicolas LE DREFF 2009
//Version 2
//ce code est visible à l'adresse suivante:
//http://www.javascriptfr.com/code.aspx?ID=38494
// cette fonction est appelée à chaque fois que l'on tape sur une touche (onkeypress,onkeyup), que l'on quite un champ(onblur).
// l'aiguillage se fait à l'intérieur.
// A savoir: si l'élément d'éclencheur de l'évenemment a un attibut nomé 'control_length' et qu'il est mis à 1, alors on traite l'évenement,
// sinon, on passe la main
function verif_textarea_length(e)
{
var target = e.target || e.srcElement; // récupération de la cible
var is_something_wrong = false; // initialisation variable
if ((target.attributes) && (target.attributes['control_length']) && (target.attributes['control_length'].value = '1')) // 'control_length'?
{
max = target.attributes['maxlength'].value; //récupération de la valeur maxlength de la cible
id_textarea = target.attributes['id'].value; //récupération de la valeur id de la cible
id_control_cell = target.attributes['id_control_cell'].value; //récupération de la valeur id de la div pour le compteur
textarea = document.getElementById(id_textarea); //assignation du textarea dans un objet plus accessible
if (textarea.value.length > max) //est-ce que la taille du texte est trop grande?
{
//oui, on affiche un message et on découpe ce qui traine après la limite
alert('Vous ne pouvez rentrer que '+ max +' caractères maximum pour ce champs');
textarea.value=textarea.value.substring(0,max);
is_something_wrong = true; // on prévient à la sortie que qque chose ne s'est pas bien passé
}
show_counter_value(id_control_cell,textarea.value.length); //on affiche la taille du texte
}
return (!is_something_wrong); //retour à l'envoyeur
}
// affiche le nombre de caractères du textarea
//rien de bien compliqué
function show_counter_value(id_control_cell,counter_value)
{
control_cell_div = document.getElementById(id_control_cell);
control_cell_div.innerHTML = counter_value ; // on met à jour le champs de contrôle.
return true;
}
//mise en place des gachettes (triggers en anglais)
function set_callback_events()
{
if (document.addEventListener){
// alert('FF');
document.addEventListener('keypress', verif_textarea_length, false);
document.addEventListener('keyup', verif_textarea_length, false);
document.addEventListener('blur', verif_textarea_length, false);
} else if (document.attachEvent){
// alert('IE');
document.attachEvent('onkeypress', verif_textarea_length);
document.attachEvent('onkeyup', verif_textarea_length);
document.attachEvent('onblur', verif_textarea_length);
}
}
</script>
</head>
<body onload="set_callback_events()">
<form name="text" method="POST" action="">
<span class="BlancLarge">Début de votre texte : </span><br>
<TEXTAREA id="rappel" rows="4" cols="80" maxlength="200" control_length="1" id_control_cell="counter"></TEXTAREA><br>
<span class="VertSmall">Nombre de caractères de ce champs : <div id="counter" style="display:inline">0</div>/ 200 max.</span><br><br>
<input type="hidden" name="mode" value="submit"><br>
<span class="BlancMedium">Pour valider et enregistrer votre texte : </span><input type="submit" value="Cliquez ici">
</form>
</body>
 Conclusion
Je pense qu'avec cette nouvelle version, je rends plus ouvert l'intégration du script dans d'autres application. J'ai aussi trouvé d'autre solution sur le net, mais j'aime bien la mienne :D
 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
- 24 janvier 2009 18:52:45 :
- Changement radical de façon d'apréhender les choses.
Epuration du code et simplification de la mise en place de la demande de contrôle
Support FF et IE
- 24 janvier 2009 18:56:52 :
- Mise à jour de la capture
 Sources de la même categorie
Sources en rapport avec celle ci
 Commentaires et avis
 Discussions en rapport avec ce code source dans le forum
Récupérer la position du curseur dans un TEXTAREA [ par piment ]
Comment récupérer la position du curseur dans un textarea ou la position en nombre de caractère depuis le début.Merci
test [ par alcatraz ]
Bonjour a tous,petite question au sujet du javascript.J'ai un formulaire de saisie de données avec plusieurs champs du type textarea.Je voudrais teste
URGENT: position du curseur dans un TEXTAREA ??? [ par Kiom ]
Bonjour tout le monde,bon voilà une petite question :est-il possible en javascript de connaître la position du curseur dans un textarea ?....une répon
Compter le nombre de caractère [ par Titrax ]
Salut quelqu'un aurait la méthode pour compter le nombre de caractère (en temps reel) que l'on met dans un textarea. MErci d'avance.
Ecrire l'heure dans une textarea [ par c0nquer ]
::.. SqualL Pow4 ..:: www.SqualLv3x.fr.st <- My siteBonjour a tous , je voudrais savoir si il est possible de mettre l'heure en temps réel dans une
comment écrire dans un textarea ?? [ par moudj ]
Bonjour,je ne sais pas si c'est possible mais voilà ce que je veux faire.pendant qu'on saisi un texte dans un textarea, on veut, à un moement donné, à
Textarea = WYSIWYG éditeur HTML [ par Blasteur ]
Bonjour à tous !Je recherche un javascript qui soit intégrable dans un formulaire de la même manière qu'une textarea. Ce script est en fait un éditeur
textarea = WYSIWYG éditeur HTML [ par Blasteur ]
Bonjour à tous !Je recherche un javascript qui soit intégrable dans un formulaire de la même manière qu'une textarea. Ce script est en fait un éditeur
Bloquer un textarea [ par hicksman ]
Salut!je voudrais bloquer ( en disabled ou readonly) un textarea en cliquant sur un bouton radio. sans recharger la page.Quelle est la méthode à utili
Insérer un fichier dans un textarea [ par CyberB ]
Bonjour,J'ai chercher et rechercher partout et je n'ai pas trouvé null part une façon d'afficher dans mon texarea le contenu d'un fichier .txtEst-ce q
|
 Téléchargements
Logiciels à télécharger sur le même thème :
Comparez les prix Nouvelle version
HTC Touch HD
Entre 25€ et 605€
|