Contrôle du nombre de caractères dans un champs textarea

Commenter

Contenu du snippet

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 / Exemple : 


<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

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (masternico)