Conteggio caratteri di un form
Pubblicato da Golars su 16 Aprile 2008
Nel seguente articolo, illustrerò, come è possibile contare i caratteri inseriti all’interno di una textarea da parte dell’utente. Nel seguente codice verrà usato sia il linguaggio di marcatura HTML (Hyper Text Mark-Up Language), sia il linguaggio di programmazione web lato client Javascript. Consiglio per chi non conosca il Javascript di studiare questo linguaggio sulle innumerevoli guide che si trovano online, tra cui quelle del sito html e di mrwebmaster.it . Comunque per la facilità del codice non sono richieste conoscenze approfondite dei due linguaggi, anche perchè ogni riga verrà commentata
Ed eccoci finalmente al codice. Iniziamo subito, per il momento, però lasceremo da parte il Javascript e ci concentreremo principalmente sull’HTML. Costruiremo infatti la struttura principale della pagina, attenendoci agli standard imposti dal W3C.
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Conteggio dei caratteri interni ad un form</title>
</head>
<body>
Contatore:
<p id=”contatore”>
</p>
<textarea id=”testo”></textarea>
</body>
</html>
Ed ecco che abbiamo concluso la struttura della pagina, creando cioè lo scheletro nel quale andremo ad inserire successivamente il codice Javascript e la sua interazione con le azioni dell’utente.
Ma prima di passare a ciò, vediamo di spiegare dettagliatamente come funziona e qual’è il significato del codice scritto sopra.
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Conteggio dei caratteri interni ad un form</title>
</head>
Il codice qui sopra serve semplicemente come premessa, alcune di queste righe richiamano gli standard del web, mentre per esempio <head></head> permette di visualizzare il contenuto come titolo sulla barra superiore del browser. Il vero corpo del codice e quello che viene visualizzato si apre dalla riga sotto
Questo riga apre lo spazio adibito al contenuto vero e proprio del corpo (in lingua inglese body vuol dire corpo).
<p id=”contatore”>
</p>
Con queste tre righe costruiamo la parte di pagina adibita a contenere il nostro contatore, infatti la prima riga del blocco stampa a video la scritta “Contatore”, inoltre crea un paragrafo (il tag <p> nel codice html sta per paragrafo), il cui id varrà “contatore” e che sarà lo spazio all’interno della nostra pagina a contenere il numero di caratteri scritti.
</body>
</html>
Con questa ultima parte creiamo la textarea (con la prima istruzione del blocco), che è lo spazio dove andremo a scrivere, e gli assegneremo il valore “testo” al suo id.
Le righe successive servono per chiudere il corpo del documento (<body>) e la pagina (<html>).
Fatto ciò passiamo ad inserire all’interno della nostra pagina gli stili grafici per la textarea e per il paragrafo, questo, per un duplice scopo, il primo puramente estetico, cosi da dare un colore alle varie parti grafiche, il secondo, perchè Javascript può dare problemi di riconoscimento dei blocchi se a questi non vengono assegnati degli stili, quindi subito dopo l’apertura del tag <head> (in italiano testa, cioè testa del codice), inseriamo il seguente codice:
textarea{font-family:verdana, arial; font-size:10px; width:300px; height: 100px;}
#contatore{font-family:times new roman, arial; font-size:15px; width:300px; height: 20px; border:2px solid #CCCCCC; background-color:#000000; color:#FFFFFF; overflow:auto;}
</style>
L’apertura del tag <style> serve per indicare al browser che quello che segue è un codice di stile (CSS), e che quindi va interpretato come tale. Mi sembra poco interessante per voi che io stia qui a spiegare come funzionino i CSS in quanto argomento complesso e certamente non esauribile in poche righe, mi limito quindi a reindirizzarvi ad una utile guida online.
Abbiamo quindi quasi finito la creazione della nostra pagina, manca però ancora una parte fondamentale (e la più interessante), quella riguardante l’uso di Javascript. Premetto che Javascript è molto più complesso e consente di fare molte più cose di quelle che illustrerò con questo articolo, nel quale non mi metterò a spiegarvi come funziona per filo e per segno Javascript, ma mi limiterò a indicarvi come funziona il codice dato qui.
Prima di mettere il codice Javascript vero e proprio, dobbiamo però effettuare un altra operazione, cioè quella della cattura devi eventi, aggiungiamo quindi i seguenti codici:
All’interno del tag <body>, questa istruzione, ci permette di richiamare la funzione conteggio() scritta in Javascript appena la pagina è stata caricata completamente.
All’interno del tag <textarea>, questa istruzione, ci permette di richiamare la funzione conteggio() scritta in Javascript, ogni volta che mentre scriviamo nella textarea, rilasciamo un tasto premuto.
Fatto ciò siamo quindi pronti per il codice Javascript vero e proprio. Questo codice deve essere inserito subito dopo la il tag </style>, all’interno della “testa” del programma
<!–
function conteggio(){
lunghezza=document.getElementById(”testo”).value.length;
document.getElementById(”contatore”).innerHTML=lunghezza;
}
–>
</script>
La prima riga, indica al browser che da li in poi fino alla chiusura è presente del codice javascript che non deve limitarsi a stampare, ma deve elaborarlo. La seconda e la penultima riga, non sono indispensabili, vengono però messe per evitare in caso di sbagliata interpretazione del codice di apertura da parte del browser che questi stampi il contenuto (infatti sono i simboli di apertura e chiusura commento in html, e che vengono ignorati da Javascript), viene inoltre usato questo espediente per evitare che certi motori di ricerca (che non riconoscono il tag </script>) cerchino dentro di esso le parole per il rank.
L’istruzione function, permette di creare una funzione il cui nome in questo caso è conteggio (la stessa funzione che facciamo chiamare dai cattura-evento). Creiamo una funzione, perchè ciò ci permette di richiamare il codice più volte senza doverla riscrivere nelle diverse parti di codice. Le parentesi graffe {}, servono per delimitare il blocco di istruzioni appartenenti alla funzione.
Passiamo adesso alle due funzioni principali di tutto il codice:
document.getElementById(”contatore”).innerHTML=lunghezza;
La prima prende il valore della lunghezza (length) del valore (value) contenuto nell’elemento di Id testo (getElementById(”testo”)), che è la nostra textarea, appartenente alla pagina visualizzata (document), e la salva all’interno della variabile lunghezza, mentre la seconda istruzione, prende il valore della variabile lunghezza e la assegnata all’elemento di Id contatore (getElementById(”contatore”)), che è il nostro paragrafo, appartenente alla pagina visualizzata (document). innerHTML, serve per definire un area nella quale stampare il valore assegnatogli. Nel nostro caso definisce l’area del paragrafo di Id contatore per stamparvi dentro il valore di lunghezza.
E dopo avervi spiegato tutto ciò, eccovi il codice completo:
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<style>
textarea{font-family:verdana, arial; font-size:10px; width:300px; height: 100px;}
#contatore{font-family:times new roman, arial; font-size:15px; width:300px; height: 20px; border:2px solid #CCCCCC; background-color:#000000; color:#FFFFFF; overflow:auto;}
</style>
<script type=”text/javascript”>
<!–
function conteggio(){
lunghezza=document.getElementById(”testo”).value.length;
document.getElementById(”contatore”).innerHTML=lunghezza;
}
–>
</script>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Conteggio dei caratteri interni ad un form</title>
</head>
<body onload=”conteggio();”>
Contatore:
<p id=”contatore”>
</p>
<textarea id=”testo” onkeyup=”conteggio();”></textarea>
</body>
</html>
E datovi il codice non mi resta che ringraziarvi per aver visitato il blog, sperando di esservi stato di aiuto.
Prossimamente, sempre da me, un ciclo di lezioni, per costruire una propria chat personale usando PHP e il database MySql
marisa detto
GRAZIE!!!!!! x avermi insegnato qlc di nuovo. avevi ragione non è difficile, ma interessante; non vedo l’ora x la prosssime lezione.
A presto!
italianjob17 detto
grazie mille, sei stato bravissimo a spiegare!