[ASP.NET] Un compteur de caractères Twitter avec jQuery

Ce billet se veut simple : nous allons coder un peu de jQuery afin de réaliser un compteur de caractères comme sur Twitter. Bien entendu il existe déjà des contrôles tout fait qui permettent de réaliser cela sans effort, mais le but ici est d'apprendre.

Pour ce billet l'objectif est d'obtenir un compteur de caractères qui durant la saisie :

• affiche en vert le nombre de caractères restants pour atteindre la limite de 140 caractères imposée par Twitter.
• affiche en rouge, si cette limite est dépassée, le nombre de caractères en trop avec un signe négatif devant.
• peut être paramétré pour afficher le nombre total de caractères à la place du nombre restant. Avec un gestion de couleur vert/rouge si la limite est dépassée.

Avec Visual Studio 2010 les scripts jQuery sont d'office intégrés dans des projets de type Web Application par exemple. Mais pour changer un peu nous allons partir d'un projet vide donc de type "ASP.NET Empty Web Application". Pour utiliser jQuery nous ferons appel au Content Delivery Network proposé par Microsoft. Pour plus d'informations à ce sujet, et notamment pour utiliser le CDN afin d'obtenir les scripts ASP.NET Ajax via le ScriptManager, je vous invite à consulter la documentation officielle. Pour importer jQuery depuis le CDN rien de plus simple, il faut ajouter entre les balises head :

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js" type="text/javascript"></script>

Ensuite nous aurons besoin d'un brin de CSS pour gérer l'état OK (vert) et non OK (rouge) de la saisie :

<style type="text/css">
    .OK{ font-weight:normal; color:Green; }
    .NOK{ font-weight:bold; color:Red; }
</style>

Pour les contrôles de saisie et pour l'affichage du nombre de caractères restant à saisir nous ferons simple : une TextBox et un Label ASP.NET comme ci-dessous :

Décompte restant sur 10 caractères : 
<br /><asp:TextBox ID="txtboxNoLimit" runat="server" Rows="3" TextMode="MultiLine"  Width="300px" /><asp:Label ID="lblCompteurNoLimit" runat="server" Text="Label" CssClass="OK" />     
<br />
<br />
Décompte total sur 10 caractères : 
<br /><asp:TextBox ID="txtboxLimit" runat="server" Rows="3" TextMode="MultiLine"  Width="300px" /><asp:Label ID="lblCompteurLimit" runat="server" Text="Label" CssClass="OK" />

Une petite méthode utile nous permettra de switcher entre l'état OK et NOK, donc simplement de changer de classe CSS pour une TextBox passée en paramètre :

function ChangeClass($Compteur, sens) {
   if (sens == 'OK') {
      $Compteur.removeClass("NOK");
      $Compteur.addClass("OK");
   }
   else {
      $Compteur.removeClass("OK");
      $Compteur.addClass("NOK");
   }
}

La dernière étape consiste à gérer l'évènement OnKeyUp et de réaliser les vérifications comme le type de compteur utilisé (Restant ou Total) et selon la longueur du texte et la limite de caractères imposée on fait appel à la méthode précédente ChangeClass :

function OnKeyUp(event) {
   var $TextBox = event.data.TextBox;
   var $Compteur = event.data.Compteur;
   var diff = 0;
   if (event.data.Type == 'Restant') {
      diff = event.data.Limite - $TextBox.val().length;
      if (diff < 0)
         ChangeClass($Compteur, 'NOK');
      else
         ChangeClass($Compteur, 'OK');
   }
   else if (event.data.Type == 'Total') {
      diff = $TextBox.val().length;
      if (diff > event.data.Limite)
         ChangeClass($Compteur, 'NOK');
      else
         ChangeClass($Compteur, 'OK');
      }
   $Compteur.text(diff);
}

Enfin l'initialisation pour cet exemple :

$(document).ready(function () {
   $("#txtboxNoLimit").bind('keyup', { Limite: 10, Type: 'Restant', TextBox: $("#txtboxNoLimit"), Compteur: $("#lblCompteurNoLimit") }, OnKeyUp);
   $("#txtboxNoLimit").blur({ TextBox: $("#txtboxNoLimit") }, OnBlur);
   $("#txtboxNoLimit").keyup();
   $("#txtboxLimit").bind('keyup', { Limite: 10, Type: 'Total', TextBox: $("#txtboxLimit"), Compteur: $("#lblCompteurLimit") }, OnKeyUp);
   $("#txtboxLimit").blur({TextBox: $("#txtboxLimit")}, OnBlur);
   $("#txtboxLimit").keyup();
})

Et voilà nous avons notre compteur comme sur la capture ci-dessous :

Vous pouvez télécharger les sources ici