Come limitare i caratteri in una textarea?

Molti di noi si sono certamente scontrati con l’impossibilità di limitare il numero di caratteri in una textarea, non esistendo l’attributo maxlength per questo tag. In questo articolo ti mostrerò una soluzione basata su jQuery funzionale e soprattutto usabile.

Il principio che vedremo consiste nel contare il numero di caratteri presenti nella textarea ad ogni rilascio di tasto evitando che ne vengano inseriti più di quelli consentiti. Parallelamente calcoleremo la differenza tra il numero massimo di caratteri consentiti ed il numero attuale, informando così in tempo reale l’utente sulla quantità di caratteri ancora a disposizione. Il risultato finale lo puoi vedere in questa pagina di esempio.

Perché eseguire dei controlli lato client sui campi di un modulo?

Quando eseguiamo dei controlli lato client (come in questo esempio) sui campi di un form, dobbiamo considerare che lo facciamo unicamente per aiutare l’utente, per rendere più usabile il sito. Non mi stancherò mai di ripetere che i controlli lato client sono facilmente aggirabili, dunque il vero controllo sui campi (lunghezza, formato, eccetera) va fatto sul server. Dopo questa doverosa premessa, possiamo iniziare.

Impostare la pagina

Ci servirà una pagina html nella quale impostare un form con una textarea. In seguito inseriremo un div (#conteggio) vuoto, in cui andremo ad inserire la frase che informa sul numero dei caratteri ancora disponibili.

<!DOCTYPE  HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script  type="text/javascript" src="jquery-1.4.1.js"></script>
    <script  type="text/javascript">
        $(document).ready(function() {
        // qui scriveremo la  funzione
        });
    </script>
</head>
<body>
    <form  id="input_form"  method="POST" action="?">
    <textarea  id="testo"></textarea>
    <input type="submit"  value="invia">
</form>
<div  id="conteggio"></div>
</body>
</html>

Ora siamo pronti a sviluppare la funzione. Iniziamo con il dichiarare la variabile caratteri che rappresenta il numero massimo di caratteri che la textarea può contenere. Ed in seguito scriviamo la frase nell’elemento conteggio.

var caratteri = 100;
$("#conteggio").append("Ti restano  <strong>"+ caratteri+"</strong> caratteri");

Ora ogni volta che si verifica l’evento keyup (ovvero il rilascio di un tasto) dovremo procedere al controllo:

$("#testo").keyup(function(){
    if($(this).val().length > caratteri){
        $(this).val($(this).val().substr(0, caratteri));
}

Questo controllo può sembrare un tantino ostico, ma vediamo cosa significa.

Con $(this).val() preleviamo l’attuale (al momento del keyup) contenuto della textarea e length ci indica il numero di caratteri. Se questo numero è superiore a quanto impostato nella variabile caratteri (nel nostro caso 100), il contenuto della textarea dovrà essere uguale al contenuto della textarea passato per la funzione substr con i parametri 0, caratteri.

La funzione substr taglia una porzione di stringa, i parametri indicano il carattere dove inizia e il carattere dove finisce questo taglio. Dunque nel nostro caso da 0 (l’inizio della stringa) a caratteri (il carattere 100).

Riassumendo: se la lunghezza della stringa contenuta nella textarea è superiore al limite massimo impostato, taglia la stringa ad una lunghezza uguale al numero di caratteri massimi impostati.

Ora modifichiamo la frase con il numero di caratteri restanti:

var  restanti = caratteri - $(this).val().length;
$("#conteggio").html("Ti  restano <strong>"+ restanti+"</strong> caratteri");

Qui semplicemente sottraiamo a caratteri il numero di caratteri scritti nella textarea ed andiamo a scrivere nell’elemento conteggio la frase risultante.

Ora aggiungiamo una piccola rifinitura. Facciamo in modo che se il numero di caratteri restanti è inferiore a dieci, la frase viene scritta con il colore rosso, in questo modo:

if(restanti <= 10)
{
    $("#conteggio").css("color","red");
}
else
{
    $("#conteggio").css("color","black");
}

Lo script completo dovrebbe ora presentarsi così:

$(document).ready(function()  {
    var caratteri = 220;
    $("#conteggio").append("Ti restano <strong>"+  caratteri+"</strong> caratteri");
    $("#testo").keyup(function(){
        if($(this).val().length > caratteri){
        $(this).val($(this).val().substr(0, caratteri));
        }
    var restanti = caratteri -  $(this).val().length;
    $("#conteggio").html("Ti restano <strong>"+  restanti+"</strong> caratteri");
    if(restanti <= 10)
    {
        $("#conteggio").css("color","red");
    }
    else
    {
        $("#conteggio").css("color","black");
    }
    });
});

jQuery: la logica delle estensioni

A questo punto abbiamo uno script che certamente ci potrà servire in più di un’occasione, dunque la logica di jQuery ci “impone” di farne un plugin. La realizzazione di un plugin per jQuery è stata esposta in modo approfondito da Nicolas nell’articolo “Come installare e creare un plugin partendo da zero“, dunque non starò a farne una descrizione minuziosa.

Iniziamo con l’impostare la struttura del plugin:

(function($){
    $.fn.limita = function(options) {

Il nostro metodo si chiamerà limita e potrà passare dei parametri. Iniziamo a stabilire quelli di default

var  defaults = {
    limit: 200,
    id_result: false,
    alertClass: false
}

Come puoi vedere i parametri saranno il limite massimo di caratteri, l’id dell’elemento contenente la frase che indicherà i caratteri mancanti (di default questo elemento non esiste) ed infine la classe css che ne determina il colore (e/o altri arrtibuti) che dovrà assumere il testo quando si scende sotto i 10 caratteri.

Questo metodo è molto più corretto di quello visto in precedanza; infatti chi ha detto che il testo debba diventare rosso? E soprattutto chi ha definito che il testo di partenza fosse di colore nero? In questo modo invece di agire con il metodo css, utilizzeremo addClass e removeClass in modo da poter configurare lo stile direttamente dal css.

Ora valorizziamo le opzioni:

var options =  $.extend(defaults, options);

Quindi scriviamo la funzione avendo cura di stampare la frase unicamente se il parametro id_result è stato valorizzato:

return this.each(function() {
    var caratteri = options.limit;
    if(options.id_result != false)
    {
        $("#"+options.id_result).append("Ti restano <strong>"+  caratteri+"</strong> caratteri");
    }
    $(this).keyup(function(){
        if($(this).val().length > caratteri){
        $(this).val($(this).val().substr(0, caratteri));
        }
        if(options.id_result != false)
        {
            var restanti =  caratteri - $(this).val().length;
            $("#"+options.id_result).html("Ti restano <strong>"+  restanti+"</strong> caratteri");
            if(restanti <= 10)
            {
                $("#"+options.id_result).addClass(options.alertClass);
            }
            else
            {
                $("#"+options.id_result).removeClass(options.alertClass);
            }
        }
    });
});

Ed ecco il plugin completo:

(function($){
    $.fn.limita  = function(options) {
        var defaults = {
        limit: 200,
        id_result: false,
        alertClass: false
        }
        var options = $.extend(defaults,  options);
        return this.each(function() {
            var caratteri = options.limit;
            if(options.id_result != false)
            {
                $("#"+options.id_result).append("Ti restano <strong>"+  caratteri+"</strong> caratteri");
            }
            $(this).keyup(function(){
                if($(this).val().length > caratteri){
                    $(this).val($(this).val().substr(0, caratteri));
                }
                if(options.id_result != false)
                {
                    var restanti =  caratteri - $(this).val().length;
                    $("#"+options.id_result).html("Ti restano <strong>"+  restanti+"</strong> caratteri");
                    if(restanti <= 10)
                    {
                        $("#"+options.id_result).addClass(options.alertClass);
                    }
                    else
                    {
                        $("#"+options.id_result).removeClass(options.alertClass);
                    }
                }
            });
        });
    };
})(jQuery);

Ora, se volessimo ottenere lo stesso risultato visto nella prima parte ma utilizzando il plugin, dovremo includere il plugin stesso e modificare il codice in questo modo (ricordandoci di creare la classe css):

<script  type="text/javascript" src="jquery-1.4.1.js"></script>
<script  type="text/javascript" src="jquery.limit.js"></script>
<style>
.alert{
    color: red;
}
</style>
<script  type="text/javascript">
    $(document).ready(function() {
        $("#testo").limita({
            limit: 100,
            id_result: "conteggio",
            alertClass: "alert"
            });
         });
</script>
Download

Conclusione

Abbiamo appena visto la bellezza della modularità di jQuery. Ad un problema, magari ricorrente, possiamo rispondere con un estensione. Se utilizziamo questo approccio, nel corso del tempo, potremo crearci una sconfinata collezione di plugin. Il loro utilizzo conferisce al codice una leggibilità ed un’eleganza impagabile.
In questo articolo ho descritto una possibile procedura per limitare la lunghezza di un testo in una textarea.
Ti è già capitato di dover studiare una procedura analoga? Che modalità hai utilizzato per risolvere il problema?

Tag: ,

L'autore

Maurizio è sposato con la triade PHP - MySql - Apache e, non pago, ha un'amante chiamata jQuery. Ha un blog dove cerca di descrivere nei minimi particolari sia la moglie che l'amante. La sua vera specialità è la realizzazione di gestionali complessi anche se non rifiuta mai un sito web. +

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

9 commenti

Trackback e pingback

  1. Tweets that mention Come limitare i caratteri in una textarea? | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by mtx_maurizio and Nicolas Gutierrez, Your Inspiration Web. Your Inspiration Web said: RT…
  2. Easy Form: Un piccolo fw per i tuoi form | Your Inspiration Web
    [...] secondo plugin che ho integrato è il limitatore di testo per i campi textarea che ho presentato in questo…