11552 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Compteur de mots dans un textarea

Bonjour,

Soit un champ de type "textarea" sur lequel on souhaite appliquer :
- une limite du nombre de mots saisis ;
- un comptage des mots en question.

Et sous le formulaire, afficher :
1- Si on n'a rien saisi : "1000 mots max." ;
2- Si on a saisi entre 1 et 999 mots : "X mots restant" (où x = 1000 - nombre de mots saisis) ;
3- Si on a saisi 1000 mots : "Limite atteinte."

Ce code permet de compter les mots, mais il lui manque :
A- l'affichage d'une phrase en fonction de la saisie ;
B- la limite de saisie à 1000 mots ;
C- la soustraction 1000-nb pour afficher le nombre de mots restants.

Comment procéder en gardant le code aussi propre que possible ?

Merci d'avance !
Modifié par Adage (03 Mar 2017 - 17:33)
Bonsoir,

Je pense que perfectionner ce genre de chose est assez complexe, des personnes s'y sont penchés des années pour avoir des rendus optimales.

Regarde dans les bibliothèque Jquery si quelque chose de similaire est optimal pour toi.

Néanmoins voici le travail que j'ai effectué. C'est loin d'être parfait mais c'est fonctionnel :

Côté Html : 
<div id="border">
            <textarea id='text' ></textarea>
        </div>
        <div id="result">
<!-- ici, j'ai ajouté un conteneur, pour pouvoir facilement fadeOut et remplacer par le message de limitation -->
            <div id="conteneurResult">
            Mots restants : <span id="motRestant">10</span><br/>
            </div>
<!-- Le message d'erreur lorsqu'il y à trop de mots -->
            <span id="alertMax" style="display:none">Limite de mot atteint</span>
        </div>


Côté css je n'ai rien touché.

Côté Js : 


counter = function() {

// Ici le nombre de mot max que l'on désire, j'ai mis 10 pour que tu puisses plus facilement tester que 1000
var nombreMotMax = 10 ; 

    var value = $('#text').val();

    if (value.length == 0) {
        $('#wordCount').html(0);
        return;
    }

    var regex = /\s+/gi;
    var wordCount = value.trim().replace(regex, ' ').split(' ').length;
    
// Si le nombre de mot compté est supérieur ou égale au nombre de mot limite
    if(wordCount >= nombreMotMax){
// On va vérifier que le message d'erreur n'est pas déjà ouvert
    if(document.getElementById('alertMax').style.display == 'none'){
// Sinon on enleve le compteur de mot que l'on remplace par le message d'erreur
    $('#conteneurResult').fadeOut(200 , function(){
    	$('#alertMax').fadeIn() ; 

// ici, on va ajouter un maxlength correspondant au nombre de caratères déjà dans le textarea qui va bloquer l'ajout de plus de caractères, c'est une meilleur solution que disabled qui bloquerait toutes actions possibles 
      $("#text").attr('maxlength',value.length) ; 
    }) ; 
    }
    }else{
// Sinon si le nombre de mot est inférieur on s'assure de fermer le message d'erreur et d'ouvrir le compteur de mot 
    	if(document.getElementById('alertMax').style.display != 'none'){
      	$('#alertMax').fadeOut(200 , function(){
        	$('#conteneurResult').fadeIn() ;
// On n'oubli surtout pas d'enlever le maxlength car si on avait tappé des mots courts, il nous serait impossible de tapper des mots plus long par la suite à cause de cette limitation même si le nombre de mot max ne serait pas atteint
          $("#text").removeAttr('maxlength') ; 
        }) ; 
      }
    }

// On montre le nombre de mot restant, soit le nombre de mot maximum - ceux que l'on à déjà tappé 
    $('#motRestant').text(nombreMotMax - wordCount);
};

// Pas mal dutout ce code, ça m'a tout l'aire de prendre à peu près toutes les possibilités ==>

$(document).ready(function() {
    $('#text').change(counter);
    $('#text').keydown(counter);
    $('#text').keypress(counter);
    $('#text').keyup(counter);
    $('#text').blur(counter);
    $('#text').focus(counter);
});


Comme je te l'ai dis, c'est fonctionnel, mais loins d'être parfait, et assez complexe.

En tout cas, j'espère que cela t'auras fait avancé dans ta logique !

Bonne soirée Smiley smile
Modifié par kevinlourenco (04 Mar 2017 - 05:56)
Meilleure solution
salut,
une autre approche où il faudra sans doute fixer la limite d'un mot (dépendra de la langue).
Les gens pourront tricher vu la façon de compter se base sur un caractère d'espacement.
Le mieux reste de limite par le nombre de caractères.
$(document).ready(function() {
    $('#text').change(counter);
    $('#text').keydown(counter);
    $('#text').keypress(counter);
    $('#text').keyup(counter);
    $('#text').blur(counter);
    $('#text').focus(counter);
});

On pensera tout de même à optimiser un peu en mettant le sélecteur dans une variable, parce que là quand même...
Sujet clos
Aller à