back to top

Javascript: svuotare un campo input o una textarea con un click

Quando si fornisce agli utenti un modulo per l’inserimento di dati può essere utile accompagnarlo da una semplice funzione che consente, con un click, di svuotare il contenuto di un campo <input> o di una <textarea>.

Realizzare questa funzionalità è molto semplice: sarà sufficiente, attraverso Javascript, creare un funzione custom attraverso la quale svuotare il valore corrente del campo che si desidera ripulire. Ecco il codice della funzione:

Pubblicitร 
function svuota(el_id) {  
  document.getElementById(el_id).value = "";
}

L’utilizzo dela funzione è semplicissimo, basterà associarla al click su un link o un bottone, avendo cura di passare in argomento l’ID del campo <input> o della <textarea> che si desidera svuotare. Ad esempio:

<label>Scrivi un messaggio:</label>
<textarea name="messaggio" id="messaggio"></textarea>
<button onclick="svuota('messaggio')">Svuota la textarea</button>

Al click sul pulsante il contenuto della textarea verrà eliminato istantaneamente.

Di seguito un esempio che utilizza un campo di tipo <input>:

<label>Tuo nome:</label>
<input type="text" name="nome" id="nome">
<button onclick="svuota('nome')">Svuota il campo</button>

Altri contenuti interessanti

Pubblicitร 

Potrebbero interessarti queste guide

Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).

Leggi anche...

Servire immagini 2x con JavaScript o jQuery su display Retina e ad alta densitร 

Oggi la qualitร  visiva sul web รจ piรน importante...

Bloccare lโ€™orientamento di una pagina web su smartphone: come forzare la modalitร  portrait o landscape

Nellโ€™era mobile-first, lโ€™esperienza utente sui dispositivi mobili รจ un...

Numeri Random in JavaScript

La generazione di numeri random (numeri casuali) รจ unโ€™operazione...

Infinite scroll, come programmarlo su AMP e su Web con Javascript

L'infinite scroll รจ una tecnica di design e navigazione...

Codice Fiscale: 5 javascript per la verifica e il calcolo

Il codice fiscale รจ un identificativo tributario univoco che...

Math.ceil() – Arrotondare per eccesso con Javascript

Il metodo ceil() dell'oggetto Math di Javascript è utilizzato...
Pubblicitร