Come cancellare i campi di input in JavaScript

Può esserci una situazione in cui è necessario per liberare il valore immesso di un campo di input o l'intero modulo. Ad esempio, è necessario modificare la categoria o incontrare un requisito specifico per modificare tutti i dati inseriti. In tali casi, la cancellazione dei campi di input usando JavaScript diventa molto efficace e utile.

Questo articolo discuterà i metodi per cancellare i campi di input in JavaScript.

Come cancellare i campi di input in JavaScript?

Per cancellare i campi di input in JavaScript, è possibile utilizzare i seguenti approcci:

• Evento "Onfocus" e proprietà "target"
• Evento "OnClick" e "Documento.metodo getElementById () "
• Metodo "reset ()"

Passare attraverso i metodi discussi uno per uno!

Metodo 1: Cancella i campi di input in JavaScript utilizzando l'evento OnFocus e la proprietà target

IL "onfocus"L'evento viene attivato quando un elemento specifico si concentra e il"bersaglio"La proprietà restituisce l'elemento che ha attivato l'evento. Più specificamente, queste tecniche possono essere applicate per cancellare il valore target specificato nel campo di input.

Il seguente esempio spiega chiaramente il concetto discusso.

Esempio

Nel seguente esempio, assegneremo un tipo di input come "testo"Con il valore specificato e e si collega come evento onfocus che attiverà la funzione clearInput ():

Ora, definisci la funzione denominata "clearInput ()" con il "bersaglio"Proprietà come argomento per restituire l'elemento che ha innescato l'evento. Successivamente, verrà applicata una condizione specifica che se il campo di input ha un valore particolare, come "Cancella input", Il campo di input verrà cancellato:

funzione clearInput (target)
Se (target.value == 'clear input')
bersaglio.value = "";

Ora, quando l'utente verrà inserito "Cancella input"Valore nel campo di input e si concentra, il valore immesso diventerà chiaro:

Metodo 2: Cancella i campi di input in JavaScript utilizzando l'evento e il documento OnClick.metodo getElementById ()

In JavaScript, il "documento.getElementById ()"Il metodo viene utilizzato per accedere a un elemento in base al suo ID e"al clic"Viene utilizzato per allegare un evento a un elemento HTML. Più specificamente, questa combinazione può essere utilizzata in modo tale quando si fa clic sul pulsante aggiunto, verrà accessibile l'elemento campo di input e il valore immesso verrà cancellato.

Esempio

In primo luogo, assegna un tipo di input con un ID chiamato come "nome":

Quindi, crea un pulsante con un valore chiamato "chiaro"E aggiungi un"al clic"Evento che accederà alla funzione ClearInput () quando attivato:

Ora, definisci una funzione chiamata "clearInput ()". Qui, il documento.getElementById () accederà al campo di input utilizzando il suo ID. Quindi, un "Se"La condizione verrà applicata in modo che fintanto che il campo di input non è vuoto, il valore del campo di input verrà impostato come vuoto:

funzione clearInput ()
var getvalue = document.getElementById ("nome");
Se (getValue.valore != "")
getValue.value = "";

In questo scenario, facendo clic sul pulsante Aggiunto cancellerà il valore del campo di input:

Vuoi ripristinare tutti i valori del campo di input contemporaneamente? Dai un'occhiata al metodo successivo.

Metodo 3: Cancella i campi di input in JavaScript usando il metodo reset ()

IL "Ripristina()"Il metodo cancella tutti i valori degli elementi della forma. Questo metodo può essere implementato per cancellare il testo del campo di input con un clic di un pulsante.

Sintassi

formObject.Ripristina()

Qui, "formObject"È l'elemento che verrà ripristinato.

Dai un'occhiata all'esempio dato.

Esempio

Innanzitutto, crea un modulo e assegnalo un ID come dimostrato di seguito. Successivamente, chiedi all'utente di inserire un "ID"Nel campo di input. Quindi, includi un pulsante con un "al clic"Evento che accede a una funzione come discusso nel metodo precedente:

ID:

Infine, dichiara una funzione chiamata "clearInput ()", Prendi il modulo usando il documento.metodo getElementById () e reimpostare il campo di input sul clic del pulsante:

funzione clearInput ()
documento.getElementById ("forma").Ripristina();

Produzione

Abbiamo dimostrato le tecniche per cancellare i campi di input in JavaScript.

Conclusione

Per cancellare i campi di input in JavaScript, utilizzare il “onfocusEvento "e"bersaglio"Proprietà per applicare la funzionalità in base alla presenza di un valore particolare o al"al clic()Evento "e"documento.getElementById ()"Metodo per ottenere l'ID del campo di input e cancellare il campo fintanto che c'è un certo valore in esso o il"Ripristina()"Metodo per ripristinare i valori di tutto il campo di input contemporaneamente. Questo articolo ha spiegato i metodi per cancellare i campi di input specificati in JavaScript.