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
Modifié par kevinlourenco (04 Mar 2017 - 05:56)