Uno dei limiti dell’HTML è quello di non consentire il limite di caratteri digitabili in una textarea. Mentre le caselle di testo dispongono dell’attributo maxlength, che consente di inibire la digitazione di caratteri oltre il limite numerico stabilito, le textarea non dispongono nativamente di un attributo simile ed il controllo va fatto in via programmatica.
Naturalmente c’è da considerare che, sia nel caso delle caselle di testo e del comodo maxlength, sia per le textarea col sistema che vedremo, si tratta di un controllo lato client, aggirabile dagli utenti più smaliziati.
L’attributo maxlength per i campi input di tipo testo
Una casella di testo riesce a limitare in questo semplice modo il numero di caratteri che l’utente può digitare:
<input type="text" name="testo" maxlength="100">Il limite, nell’esempio, è impostato a 100 caratteri e l’utente non riuscirà più a scrivere dal carattere 101 in poi.
In un caso del genere si consideri che è bene avvisare l’utente che ha un limite, onde evitare che, distratto, continui a (pensare di) scrivere senza in realtà scrivere nulla.
Limitare in caratteri di una textarea con un count-up
In un file HTML si crei la seguente area di testo:
<form name="modulo">
<textarea name="testo" cols="30" rows="5" onkeyup="ContaCaratteri()"></textarea>
<input type="text" name="conta" value="0" readonly>
</form>Creiamo innanzitutto un modulo a cui assegnamo un nome e poi creiamo un’area di testo che all’evento onkeyup (ovvero: in fase di digitazione) richiama la funzione Javascript che analizzeremo a breve.
Creiamo in fine una casella di testo in cui compaiono il numero di caratteri digitati da zero (0), impostato come valore di default, al massimo numero consentito.
Vediamo il codice Javascript della funzione ContaCaratteri() richiamata nella textarea all’evento onkeyup:
<script type="text/javascript">
function ContaCaratteri()
{
document.modulo.conta.value = document.modulo.testo.value.length;
var massimo = 500;
if (document.modulo.testo.value.length > massimo)
{
document.modulo.testo.value = document.modulo.testo.value.substr(0, massimo);
document.modulo.conta.value = massimo;
alert("Massimo " + massimo + " caratteri!");
}
}
</script>Il codice della nostra funzione è davvero semplice:
- assegnamo alla casella di testo il numero di caratteri correntemente digitato nella textarea;
- impostiamo il massimo numero di caratteri consentito;
- controlliamo che il numero di caratteri digitato sia maggiore del massimo consentito;
- se la condizione di cui sopra si verifica stoppiamo lo script tagliando la stringa fino al numero massimo di caratteri consentito, reimpostando il numero massimo di caratteri nella casella di testo e lanciando un alert di avviso.
In questo modo il valore della casella di testo inizierà da zero (0) e si fermerà al limite stabilito.
L’esempio è impostato su 500 caratteri per essere verosimile ma, per testarlo velocemente, si provi ad impostare il valore della variabile "massimo" a 10.
Limitare in caratteri di una textarea con un count-down
C’è tuttavia chi trova più comodo per i propri utenti partire dal numero massimo consentito e decrementare il numero fino a zero (0) e quindi inibire la digitazione di ulteriori caratteri. Personalmente trovo angosciante questo secondo sistema, ma di certo mi da maggiormente la sensazione di limite, quindi, comunque, funziona meglio!
Allo scopo dobbiamo apportare alcune semplici modifiche al codice HTML ed allo script Javascript.
Al codice HTML è sufficiente eliminare dalla casella di testo il valore predefinito che nell’esempio del count-up era zero (0): imposteremo via Javascript il valore massimo.
Segue il codice HTML corretto:
<form name="modulo">
<textarea name="testo" cols="30" rows="5" onkeyup="ContaCaratteri()"></textarea>
<input type="text" name="conta" readonly>
</form>Il codice Javascript è stato apparentemente stravolto ma in realtà le modifiche sono funzionali al count-down invece che al count-up. Segue il codice completo:
<script type="text/javascript">
var massimo = 500;
window.onload = function()
{
document.modulo.conta.value = massimo;
}
function ContaCaratteri()
{
document.modulo.conta.value = massimo - document.modulo.testo.value.length;
if (document.modulo.testo.value.length > massimo)
{
document.modulo.testo.value = document.modulo.testo.value.substr(0, massimo);
document.modulo.conta.value = 0;
alert("Massimo " + massimo + " caratteri!");
}
}
</script>Impostiamo la variabile "massimo"come globale, all’esterno delle funzioni in modo da usarla sia per lo script che per scrivere dinamicamente il valore all’interno della casella di testo di riferimento del count-down.
Quest’ultima operazione la effettuiamo impostando esplicitamente in una funzione l’evento onload della pagina.
Segue poi la funzione ContaCaratteri() il cui evolversi è il seguente:
- in fase di digitazione dei caratteri decrementiamo il valore della casella di testo calcolandolo al volo, effettuando la sottrazione tra il massimo numero di caratteri consentito e la lunghezza corrente data dal numero di caratteri digitati nella textarea;
- per il resto effettuiamo le stesse operazioni dell’esempio precedente, ovvero il controllo della lunghezza della stringa digitata nella textarea, il taglio dei caratteri "superflui", il settaggio del valore della casella di testo a 0 (non al valore massimo, in questo caso) e l’alert di avviso.
Nota: sia nell’esempio del count-up che del count-down, il codice Javascript va inserito nella pagina prima del codice HTML.
Contare e limitare i caratteri con jQuery
Per prima cosa vediamo il codice HTML della nostra textarea:
Digita il tuo messaggio:<br/>
<textarea id="msg"></textarea><br/>
<span id="conteggio"></span>La cosa importante da notare sono gli ID assegnati, rispettivamente, alla textarea ed allo span. Vediamo ora il codice Javascript da inserire dopo il codice HTML appena visto:
// avvio il controllo all'evento keyup
$('textarea#msg').keyup(function() {
// definisco il limite massimo di caratteri
var limite = 100;
var quanti = $(this).val().length;
// mostro il conteggio in real-time
$('span#conteggio').html(quanti + ' di ' + limite + ' caratteri ammessi');
// quando raggiungo il limite
if(quanti >= limite) {
// mostro un avviso
$('span#conteggio').html('<strong>Non puoi inserire più di ' + limite + ' caratteri!</strong>');
// taglio il contenuto per il numero massimo di caratteri ammessi
var $contenuto = $(this).val().substr(0,limite);
$('textarea#msg').val($contenuto);
}
});Ovviamente, perchè tutto funzioni, è necessario aver incluso la libreria jQuery all’interno dell’header della pagina.
Pro e contro delle tecniche lato client di limitazione dei caratteri
I due sistemi di controllo della lunghezza dei caratteri esaminati non hanno dei veri pro e contro, ma se cosi li vogliamo chiamare, possiamo dire che:
- pro – non esiste altro sistema lato client per una textarea;
- contro – trattandosi di un controllo lato client, chiunque conosca un po di HTML e di Javascript può scaricare il modulo in locale sul proprio computer, eliminare il controllo ed inviare i dati, in quantità oberosa, allo script lato server che li eseguirà.
Il contro vale tanto per le textarea che per le caselle di testo col più comodo, anche se "meno bello a vedersi", attributo maxlength.
Il problema è da ricercarsi in fase di teoria dei database e sulla lunghezza massima dei campi.
Per chi non lo sapesse, quando si vanno ad archiviare dei dati testuali in un database (MS Access, MySQL etc…), è necessario definire la lunghezza del valore del campo che per i diversi tipi dati di testo, partono da massimo 255 caratteri (ed in questo caso si utilizzano le aree di testo) ed a diversi scaglioni fino a massimo 16 milioni di caratteri.
Il fatto è che, anche se si gestisce un campo di 16 milioni di caratteri, per determinate esigenze di archiviazione dei dati, si può voler consentire ad un utente di inserire massimo 500, 1000, 2000 o quel che sia caratteri e non potenzialmente tutti e 16 milioni, anche se tecnicamente possibile.
La soluzione definitiva, da integrare al controllo lato client in oggetto a questo articolo, è il controllo lato server in fase di invio dei dati.
Controllo lato server della lunghezza dei caratteri con ASP e PHP
Per rendere questo articolo completo usciamo fuori tema e non parliamo più di Javascript, bensì di ASP e PHP, i due linguaggi lato server più diffusi del Web e quindi maggiormente utilizzati per gestire i database.
Facciamo dunque un esempio con entrambi i linguaggi per verificare che, una volta che i dati del modulo vengono inviati al server, non si verifichino problemi di lunghezza delle stringhe che potrebbero mandare pericolosamente in errore il database.
Nei due esempi precedenti, in cui abbiamo controllato prima con un sistema di count-up e poi con un sistema di count-downn che i caratteri inseriti in una textarea non superino un certo limite, abbiamo assegnato il nome testo alla textarea di esempio.
Basiamoci dunque su questo stesso nome per recuperare i dati immessi nella textarea e verificarne la lunghezza.
Iniziamo con ASP:
<%
Dim testo, massimo
testo = Request.Form("testo")
massimo = 500
If testo = "" Or <strong>Len(testo) > massimo</strong> Then
Response.Write "Inserire un testo di massimo " & massimo & "caratteri"
Else
' OPERAZIONE ANDATA A BUON FINE...
End If
%>Passiamo all’esempio PHP:
<?
$testo = $_POST["testo"];
$massimo = 500;
if ($testo == "" || <strong>strlen($testo) > $massimo</strong>)
{
echo "Inserire un testo di massimo " . $massimo . "caratteri";
}
else
{
// OPERAZIONE ANDATA A BUON FINE...
}
?>In entrambi gli esempi ho evidenziato in grassetto le funzioni ASP prima, e PHP poi, che verificano che la lunghezza della stringa inserita nella textarea sia o meno superiore a quella consentita.
Se maggiore riceviamo un messaggio di errore, altrimenti effettueremo le operazioni del caso.
