jQuery: una barra di avanzamento per mostrare il "riempimento" di una textarea
Pagina 1 di 2
Spesso problemi apparentemente di facile soluzione si dimostrano più ostici del previsto, ed ecco che tipicamente ci si trova a perdere mezza giornata di lavoro districandosi tra tentativi più o meno ortodossi e febbrili consultazioni di siti web, alla disperata ricerca di qualcuno che abbia già affrontato il problema.
Quando per un progetto ho avuto la necessità di limitare il numero di caratteri consentiti in una textarea ho pensato che avrei risolto in pochi minuti; non è stato così, ho trovato parecchie soluzioni in rete ma nessuna mi convinceva fino in fondo, quindi ho deciso di implementare qualcosa di custom utilizzando jQuery e l'ottimo jQueryUi, in particolare il componente progessbar del pacchetto.
Recupero dei files necessari
Colleghiamoci a http://jqueryui.com/ e clicchiamo sul bottone "Build custom download" in alto a destra.
Nella pagina successiva selezioniamo i componenti utili, e tra i widget disponibili decidiamo di prendere solo la progressbar.
- css: contiene la cartella del tema scelto, nel nostro caso quello di default, ui-lightness
- development-bundle: contiene esempi e documentazione
- js: contiene i due files necessari a far funzionare la nostra soluzione; jquery-1.4.4.min.js e jquery-ui-1.8.9.custom.min.js
- index.html: una pagina che ci permette di vedere un esempio themed del/degli widget che abbiamo scelto
Per il nostro piccolo esempio creeremo una semplice struttura così composta:
- cartella decompressa di jQueryUi (jquery-ui-1.8.9.custom)
- file.html contentente la textarea
- file.js contenente il codice jQuery
Creiamo il nostro file html, diamogli un nome evocativo (noi lo chiameremo mrw_jquery_txtcheck.html) e inseriamo nel tag head le inclusioni necessarie: i link al css del tema scelto e ai file js di jQuery e jQueryUi.
<link type="text/css" href="jquery-ui-1.8.9.custom/css/ui-lightness/jquery-ui-1.8.9.custom.css" rel="stylesheet" /> <script type="text/javascript" src="jquery-ui-1.8.9.custom/js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.9.custom/js/jquery-ui-1.8.9.custom.min.js"></script>
Nel body aggiungiamo la textarea:
<div><textarea name="limitedOne" id="limitedOne" style='width:250px;height:100px;'></textarea></div>
Inseriamo poi il div che conterrà la progressbar e un placeholder per dare all'utente un'idea anche numerica di quanti caratteri rimangono.
<div id="progress" style="height: 20px;"></div> <p>Disponibili <span id="charCounter">255</span> caratteri.</p>
Ora possiamo procedere a scrivere in un file apposito il codice Javascript/jQuery con le funzioni necessarie, che poi includeremo anch'esso nel tag head, noi lo chiameremo check_textarea.js.
Definiamo innanzi tutto le variabili base; i caratteri consentiti e quelli disponibili all'inizio hanno lo stesso valore:
MAX_CHARS = 255; remaining = MAX_CHARS;poi definiamo la funzione che effettua i controlli e valorizza progressbar e contatore:
function checkTextareaLength() {
var current_length = undefined == $("#limitedOne").val().length ? 0 : $("#limitedOne").val().length;
remaining = (MAX_CHARS - current_length);
if(remaining < 0) {
$("#limitedOne").val($("#limitedOne").val().substring(0, MAX_CHARS));
} else {
$("#charCounter").html(remaining);
var pv = Math.floor((((MAX_CHARS-remaining)/MAX_CHARS)*100));
$('#progress').progressbar("value", pv);
}
}
Analizziamo il codice: nelle prima riga la checkTextareaLength ricava il valore attuale della textarea attraverso la funzione val() di jQuery, poi conta il numero dei caratteri inseriti leggendo l'attributo length.
Nella riga successiva ottiene il numero dei caratteri disponibili per differenza. A questo punto esistono 2 possibilità.
1. La variabile remaining è minore di zero (ad esempio a seguito di un copia/incolla); il blocco if raccoglie il valore della textarea e lo limita a 255 caratteri utilizzando la funzione nativa di Javascript substring
$("#limitedOne").val($("#limitedOne").val().substring(0, MAX_CHARS));
2. remaining è maggiore di zero, nel blocco else per prima cosa viene valorizzato lo span con il numero dei caratteri rimasti:
$("#charCounter").html(remaining);
Poi la funzione calcola il rapporto percentuale tra il massimo numero di caratteri disponibili e quelli attualmente inseriti; la funzione di libreria Math.floor arrotonda il risultato (verso il basso) all'intero più vicino:
var pv = Math.floor((((MAX_CHARS-remaining)/MAX_CHARS)*100));
a questo punto non ci resta che assegnare il valore trovato alla progressbar
$('#progress').progressbar("value", pv);
Scriviamo ora il codice che verrà eseguito sul DOM Ready.
Inizializziamo la progressbar ed effettuiamo il bind degli eventi che vogliamo intercettare: il keypress, il mouseout, il change ed il blur. Li monitoriamo tutti per intercettare il caso in cui l'utente dovesse utilizzare il copia/incolla.
Notate che la chiamata alla funzione viene differita di pochi centesimi di secondo attraverso la funzione nativa setTimeout in modo da essere certi di avere sempre il valore nel momento corretto, quando l'utente ha finito di digitare.
$(function() {
$("#progress").progressbar();
$("#limitedOne").bind("keypress mouseout change blur", function() {
setTimeout("checkTextareaLength()", 200);
});
});
