janv. 09 2011

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

Category: ASP.NET | ASP.NET 4 | JavascriptNicolas Esprit @ 16:11

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 :

 

Compteur Twitter JQuery

Vous pouvez télécharger les sources ici

Tags: , , , ,

Commentaires

1.
Jon Jon Canada says:

Salut,

J'aime bien ton exemple mais en essayant de l'intégrer dans une page avec ContentPlaceHolder/MasterPage, ça ne fonctionne pas. La ligne «$(document).ready(function ()» est exécuté, mais le compteur n'est pas initialisé. Ça ressemble à un problème de nom de contrôle.

Merci de ton aide!

2.
Nicolas Nicolas France says:

Bonjour,

Peux-être un problème inhérent à ton implémentation ? As-tu essayé le code source fourni à la fin du billet ?

Je t'ai envoyé un mail pour que tu puisses m'envoyer le code de ta page si besoin.

3.
Jon Jon Canada says:

J'ai trouvé le problème. En utilisant ton exemple dans une page intégré à un MasterPage, les noms des contrôles ne sont plus reconnus.

Voici ce que j'ai changé :

$('textarea[id$=txtMessage]').bind('keyup', { Limite: 140, Type: 'Restant', TextBox: $('textarea[id$=txtMessage]'), Compteur: $('span[id$=lblCompteurNoLimit]') }, OnKeyUp);
$('textarea[id$=txtMessage]').blur({ TextBox: $('textarea[id$=txtMessage]') }, OnBlur);
$('textarea[id$=txtMessage]').keyup();

4.
wam wam France says:

Merci Nicolas pour le tuto, et merci Jon pour l'astuce qui m'a beaucoup aidé aussi!

Les commentaires sont clos