Limiter le nombre de caractères dans une TextArea avec MooTools
Voici un petit snippet que j'utilise régulièrement pour limiter le nombre de caractères dans une TextArea. En effet, en HTML, la propriété maxlength ne s'applique pas pour un tel élément, et nous sommes obligés de passer par le Javascript. Pas cool ? Certes, mais nous n'avons pas le choix. :)
Grand utilisateur de MooTools, je vous propose ici une solution avec ce merveilleux framework.
$('myTextArea').addEvent('keyup', function(e){
var maximumCharacters = 140;
var numberCharacters = this.get('value').length;
var leftCharacters = maximumCharacters - numberCharacters;
if(leftCharacters < 0)
{
leftCharacters = 0;
this.set('value', this.get('value').substr(0, maximumCharacters));
}
$('leftCharacters').set('text', leftCharacters.' characters left.');
});
Le code se passe de commentaires. La textarea aura pour ID myTextArea et nous ajoutons un champ texte (par exemple, un paragraphe) pour indiquer le nombre de caractères restants pour l'utilisateur, leftCharacters.
J'en profite également pour vous souhaiter une bonne année 2010. Que celle-ci vous apporte tout le bla bla habituel... :)
Des bonnes résolutions pour ce blog ? Hmm... Je dirais toute résolution supérieure à 1024x768. Blague archi-connue, mais permettant de contourner simplement cette tradition des voeux pieux, qui ne sont (quasiment) jamais respectés. ;)
Bonjour Jonathan,
J'ai besoin d'utiliser ton code pour limiter le nombre de caractère dans une classe qui contient du texte.
Est-ce possible d'adapter ton code pour mon cas ?
Merci d'avance,
Zenka
@Zenka : Euh... J'ai même pas compris ce que tu entends par "une classe qui contient du texte". Peut-être peux-tu m'en dire plus que je vois si je peux t'orienter (mais pas le faire à ta place) ? ;)
Pour faire simple :
J'aimerais limiter le nombre de caractères (entrés dans le back-office) dans la <div class="textePage">.
Oui, bien sûr, je te demande pas de le faire à ma place, mais juste m'orienter pour me dire si cela est possible en modifiant un peu ton code d'origine. :)
@Zenka : Hmm... Cela serait plutôt sur la partie serveur qu'il faudrait jouer, si tu ne veux afficher que les 100 premiers caractères sur ta page. Dans ce cas, en PHP, regarde la fonction substr.
Sinon, dans ton back-office, tu as bien une textarea pour la saisie, non ? Il faut donc utiliser le script ci-dessus. :s
Pas sûr d'avoir tout compris. :/
Je sais qu'on peut le faire en php, mais on cherche à créer un effet sympas en utilsant FX.morph ensuite qui montrera la suite du texte.
EN tous cas tu nous à donné une bonne piste, merci à toi.
Bonne continuation à toi pour ce blog bien sympa :)
@Zenka : OK. Je viens de comprendre. Dans ce cas, tu stockes dans une variable le contenu original de la div, tu appliques ensuite un petit substring en Javascript pour n'afficher que ce que tu veux, et tu morphes ta div. :)
(Pas évident à comprendre pour le visiteur lambda qui n'y connaît rien en informatique... En même temps, celui-ci n'irait pas lire cet article, et encore moins lire ces commentaires. :p)
Ha ben voila merci, J'essaye ça de suite :)
Re,
Bon alors ça fonctionne avec substring, mais mon problème c'est qu'il veux pas faire l'inverse , rendre visible tout le texte si on appui sur le bouton. ( Je sais pas trop si tu m'a compris ^^)
var totalChars = $$('#entetePage .textePage')[0].get('text');
var maximumChars = totalChars.substring(0,300);
$$('#entetePage .textePage').set('html', maximumChars + 'Afficher');
$('unmaskText').addEvent('click', function(){
$$('#entetePage .textePage').set('html', totalChars + 'Masquer');
});
$('maskText').addEvent('click', function(){
$$('#entetePage .textePage').set('html', maximumChars + 'Afficher');
});
En faite il exécute pas la dernier fonction car il ne trouve pas 'masktext' alors que pourtant il existe quand on inspecte le code source de la page html'.
Tu as pas une idée pour nous aider ?
Tu aurais pas une idée ?
C'est bon problème résolu :)
Bonjour,
Mon souci en qualité d'ultra-novice en la matière WordPress est le suivant : je cherche un plug-in qui puisse limiter à XX caractères le contenu des commentaires que me laissent mes lecteurs, cela pour éviter les bavards qui font des comm' plus long que mes articles. Aurais-tu une solution ?
Merci.
@Vincent : Je ne suis pas sûr qu'un plug-in soit nécessaire. Tu peux premièrement implémenter une solution comme décrite dans ce billet pour limiter niveau Javascript les commentaires trop longs, même si dans le cas de WordPress (qui n'utilise pas MooTools), il serait plus propre d'utiliser JQuery. Cela limiterait les commentaires trop longs.
Ensuite, pour empêcher les commentaires trop longs, je pense que tu dois pouvoir ajouter un filtre dans le fichier functions.php. Il doit bien exister un hook (comprendre un déclencheur qui exécute une fonction) lors de l'envoi de commentaires. A ce moment là, il te suffira de tronquer le message en PHP avec un petit mb_substr par exemple.
Dans tous les cas, je ne trouve pas que cela soit une bonne idée de limiter le nombre de caractères dans tes commentaires. Si c'est pour ne pas complexer d'écrire des articles plus courts, il vaut mieux en écrire moins mais de plus longs, non ? :p
En effet, limiter ses visiteurs peut s'avérer assez frustrant. Nous ne sommes pas sur Twitter, et il peut être fort désagréable de devoir résumer son opinion soit en écrivant en abrégé (réduisant par la même occasion la qualité de lecture de ton blog) soit en supprimant complètement certains arguments. :s