Avec l’arrivée du nouvel algorithme Google Panda, en place en France depuis quelques jours seulement, il est important pour les sites Internet de conserver une qualité de contenu irréprochable. Des textes originaux et uniques sont plus que jamais de rigueur, mais quelques lignes ne suffisent pas, il est également nécessaire de rédiger des textes suffisamment longs.
Certains sites communautaires et annuaires vont notamment devoir revoir leurs conditions de participation en demandant aux auteurs de rédiger des textes contenant un certain nombre de caractères au minimum.
C’est l’objet de cette portion de code jQuery que je viens d’écrire et qui a pour fonction de compter le nombre de caractères d’une zone de texte et d’afficher dynamiquement le résultat dans une légende. Ainsi les auteurs savent à tout moment s’ils ont atteint ou non le quota nécessaire.
Bien évidemment, cette fonction étant écrire en JavaScript, il est essentiel de faire également une vérification coté serveur (PHP ou ASP par exemple), c’est un simple outil qui permet une saisie plus confortable.
La source étant bien commentée, je pense que de plus amples explications sont superflues.
<html>
<head>
<title>Affichage dynamique du nombre de caractères en jQuery</title>
</head>
<body>
<script src="include/jquery.js" type="text/javascript"></script>
<style type="text/css">
.suffisant {
color: #00ff00;
}
.insuffisant {
color: #ff0000;
}
</style>
<script type="text/javascript">
//Attendre que le document soit chargé
$(document).ready(function(){
//La fonction s'active sur l'évènement keydown dans la zone de texte
$("#zone").keydown(function(limit) {
//Définir la limite à atteindre
var limit = "10";
//Récupérer le nombre de caractères dans la zone de texte
var currlength = $(this).val().length;
//Afficher un texte de légende en fonction du nombre de caractères
if(currlength >= limit){
$("#legende").removeClass("insuffisant").addClass("suffisant").html("Vous avez saisi " + currlength + " caractères sur " + limit + ", c'est suffisant, mais si vous êtes inspiré, vous pouvez continuer.");
}
else{
$("#legende").removeClass("suffisant").addClass("insuffisant").html("Vous avez saisi " + currlength + " caractères sur " + limit + ", c'est encore trop peu.");
}
});
});
</script>
<form>
<textarea id="zone">test</textarea>
</form>
<div id="legende" class="insuffisant"></div>
</body>
</html>
Retour PingAffichage dynamique du nombre de caractères en jQuery | Développement sites Web originaux | Scoop.it
Merci, c’est plutôt pratique comme fonction. Cela dit, je crois qu’il y a encore peu de sites qui ont tenu compte de la mise à jour de Google Panda. Pour certains d’ailleurs cette mise à jour ne change pas grand chose.
Merci 🙂
Google Panda ne changera rien pour certains sites web, mais pour d’autres les statistiques de fréquentations on considérablement grimpé (les sites de contenu vraiment très pertinents et originaux), alors que d’autres (notamment les sites qui cherchent pas tous les moyens à apparaitre en bonne position des résultats de Google pour toutes les recherches possibles, sans offrir le moindre contenu intéressant) ont perdu la plus grande partie de leur trafic. Et je dis tant mieux ! Il y a tellement de « petits » site intéressants qui méritent d’être mieux connus.
Merci pour cet article. Effectivement, c’est assez facile à mettre en place grâce à l’exemple.
L’événement keyup serait plus approprié selon moi
A priori, pour une saisie de texte, l’un ou l’autre me semble équivalent.
Pourrais tu développer pour quelle raison tu penses que keyup serait mieux adapté, c’est intéressant ?
Merci pour se très bon script, simple et efficace.