Avere un anteprima del commento che si sta scrivendo, risulta molto utile, specialmente se si vuole utilizzare qualche tag html tipo quello per inserire link, citazioni o mettere il testo grassetto, o in corsivo. Per far ciò bastano poche semplici righe di jquery.
Codice HTML
Innanzitutto ci serve il codice HTML della textarea in cui l’utente inserisce il commento.
<body> <h3>Inserisci del testo per far apparire l'anteprima</h3> <textarea id="commento"></textarea> </body>
Di seguito aggiungiamo un DIV vuoto, dove vogliamo che appaia l’anteprima e diamoli un id, in questo caso l’ho chiamato “anteprima”.
<body> <h3>Inserisci un commento per far apparire l'anteprima</h3> <textarea id="commento"></textarea> <div id="anteprima"> <h3>Anteprima del commento</h3> <div><!-- l'anteprima apparirà qui --></div> </div> </body>
Per l’esattezza, l’anteprima del commento non apparirà dentro al div “anteprima” ma in quello vuoto che si trova al suo interno.
Nascondiamo il tutto con un tocco di CSS.
#anteprima {
display: none;
}
In questo modo, non vedremo neanche la scritta “Anteprima del commento”; lo faremo riapparire al momento giusto con lo script.
Script Jquery
Come al solito, assicuriamoci di aver incluso la libreria jquery nell’head e usando un file esterno o la stessa pagina html, creiamo il nostro script.
$(document).ready(function(){
$("#commento").keyup(function() {
//funzione da eseguire
});
});
Per far sì che lo script inizi a lavorare, usiamo l’evento jquery keyup, che esegue una certa funzione quando viene premuto (e rilasciato) un tasto mentre il focus si trova sulla textarea (che ha ID commento).
$(document).ready(function(){
$("#commento").keyup(function () {
var comment = $(this).val();
$("#anteprima").show().children('div').html(comment);
});
});
La funzione da eseguire è molto semplice:
- Prendo il contenuto della textarea e lo salvo nella variabile comment.
- Faccio apparire il div con id anteprima
- Seleziono l’altro div vuoto che si trova al suo interno e vi scrivo il contenuto della variabile comment (cioè il testo del commento stesso)
Abbiamo quasi finito, basta fare qualche prova e vediamo che i vari tag html tipo <a>, <strong>, <i> vengono perfettamente “interpretati” nell’anteprima.
C’è solo un problema: quando premiamo invio, il testo non va a capo ma aggiunge semplicemente uno spazio.
$(document).ready(function(){
$("#commento").keyup(function () {
var comment = $(this).val().replace(/\n/g, "<br />");
$("#anteprima").show().children('div').html(comment);
});
});
Per correggere questo errore, basta agire sulla variabile comment e sostituire i \n, cioè i “simboli delle andate a capo” con dei <br />.
Fine
Adesso lo script è completo e pronto all’uso. Puoi sperimentarlo aggiungendo un commento su questa pagina!
Sottoscrivi il nostro Feed
7 Commenti
02:42
Grazie del tutorial Raspo
Stavo leggendo il tuo tutorial “Creare un ajax contact form con validazione dei dati” e volendo pubblicare un commento, ho notato l’anteprima. Ovviamente mi sono chiesto come si farà mai una cosa del genere e subito dopo, ho trovato il link che mi ha dato la risposta.
Ottimo tutorial, complimenti!
ps. Questi giorni ero in cerca di un buon libro di jquery&ajax, volevo sapere se mi sapresti consigliare qualcosa, un libro o delle risorse online… Solitamente mi baso sui tutorial ma da quanto ho visto, jquery merita di essere imparato come si deve e per questo i tutorial non bastano… Grazie anticipatamente.
10:55
Ti ringrazio della visita e dei commenti che hai lasciato, mi fanno molto piacere.
Io non sono affatto un esperto di jQuery, ho iniziato a impararlo negli ultimi mesi e tutto quello che so, lo so grazie ad ottimi tutorial (specialmente quelli video) sparsi per la rete.
Per iniziare io ho trovato utilissime certe serie tipo: Introduction to jquery di css-tricks.com e jquery for absolute beginners.
Per fare cose un po più elaborate puoi dare un’occhiata su http://jqueryfordesigners.com/ e http://net.tutsplus.com/.
Come puoi vedere non sono un fan dei libri, cmq, capita che su questi stessi siti che ti ho indicato, di tanto in tanto ne consiglino alcuni.
Ovviamente tutta questa mole di materiale è in inglese.
Ad ogni modo, anche io sto tentando di scrivere una serie di tutorial su jQuery, ma purtroppo vado a rilento per una mancanza di tempo, ma soprattutto ispirazione, magari mi puoi aiutare consigliandomi qualche argomento interessante da trattare.
11:36
Buongiorno Raspo,
.
Ti ringrazio per i link che mi hai passato, quello themeforest l’avevo visto qualche mesetto fa ma non sono più riuscito a trovarlo sul sito, molto probabilmente ricercavo male
Da come vedo anche tu sei un appassionato della famiglia envato (net.tutsplus.com, themeforest ecc)…
Non appena finisco il contact form con allegato potresti pubblicare direttamente quello o inserire l’allegato in quello che già presente.
Un’altro tutorial che potresti pubblicare è il fix delle png per ie6… Dopo svariate ricerce e prove di diverse lib js, ho trovato un’ottima libreria che mi ha permesso di sistemare questo problema aggiungendo semplicemente una classe ai div o ai tag img che avevano della png con la trasparenza. Sto parlando di UnitPng
11:55
Mi hai scoperto!;) In particolare mi piacerebbe trovare un designer per mettermi in società su themeforest, visto che con photoshop faccio pena…
E’ un ottima idea perché nonostante la grande quantità di informazioni a riguardo su internet, trovo ci sia troppa confusione, non si capisce quale sia la soluzione migliore. Io ad esempio mi sono trovato bene con DD_belatedPNG.
12:18
Hai completamente ragione di cose utili ce ne sono tante, ma molto spesso c’è troppa confusione…
Io penso di essere abbastanza bravo sia col codice che con photoshop(faccio da poco il web designer&developer)…
Questo è il mio progetto attuale: Progetto Enterteam
E la società per cui ho iniziato a lavorare e come primo progetto ho avuto proprio il development & designing del nostro sito web…
Se ti piace il design che ho creato per il sito linkato sopra forse possiamo riparlare meglio della tua idea riguardante themeforest
ps: la pagina dei contatti contiene quel contact form di cui ti parlavo…
01:34
Il contact form a quella pagina però non ha la parte dell’invio del file, se mi posti ciò a cui sei arrivato fin’ora posso vedere di farci qualcosa.
Per il resto, ti ho mandato un email.
11:49
ciao Raspo,
La pagina con l’allegato è questa: Contact + attachment
la pagina con codice php la trovi quì: php page
il problema che ho è che non so come passare il file allegato alla pagina php. Ho già provato a inserire semplicemente un’altro valore con il nome del file direttamente dentro la funzione jquery/ajax $.post ma come pensavo non funziona in questo modo molto probabilmente perché la funzione jquery/ajax manda al php solo l’array php $_POST e non quello $_FILE.
Ho trovato questa lib per l’upload ajax, ma penso ci sia un modo più semplice per fare ciò che mi interessa senza dover includere altri js e studiarmi il codice…
Spero che tu mi sappia aiutare con questo problema.
Grazie anticipatamente.