Hvordan tømme inndatafelt i JavaScript

Det kan være en situasjon der det kreves for å fjerne den angitte verdien av et inngangsfelt eller hele skjemaet. For eksempel må du endre kategorien eller møte et spesifikt krav for å endre alle angitte data. I slike tilfeller blir det veldig effektivt og nyttig å fjerne inngangsfelt ved bruk av JavaScript.

Denne artikkelen vil diskutere metodene for å fjerne inngangsfeltene i JavaScript.

Hvordan tømme inndatafelt i JavaScript?

For å fjerne inngangsfelt i JavaScript, kan følgende tilnærminger brukes:

• “Onfocus” -hendelse og “Target” -egenskaper
• “OnClick” -hendelse og “Dokument.getElementById () ”-metode
• “Reset ()” -metoden

Gå gjennom de diskuterte metodene en etter en!

Metode 1: Fjern inngangsfelt i JavaScript ved hjelp av Onfocus -hendelsen og Target Property

“Onfokus”Hendelsen utløses når et spesifikt element får fokus, og“mål”Eiendom returnerer elementet som utløste hendelsen. Mer spesifikt kan disse teknikkene brukes for å tømme den spesifiserte målverdien i inngangsfeltet.

Følgende eksempel forklarer det diskuterte konseptet tydelig.

Eksempel

I det følgende eksempel vil vi tilordne en inngangstype som "tekst”Med den spesifiserte verdien og og fest som onfocus -hendelse til den som vil utløse ClearInput () -funksjonen:

Nå, definer funksjonen som heter “ClearInput ()" med "mål”Eiendom som argument for å returnere elementet som utløste hendelsen. Etter det vil en spesifikk tilstand bli brukt at hvis inngangsfeltet har en bestemt verdi, for eksempel "klar inngang”, Inngangsfeltet vil bli fjernet:

funksjon ClearInput (mål)
hvis (mål.verdi == 'klar inngang')
mål.verdi = "";

Nå, når brukeren vil legge inn “klar inngang”Verdi i inngangsfeltet og det får fokus, den angitte verdien vil bli klar:

Metode 2: Fjern inngangsfelt i JavaScript ved hjelp av OnClick -arrangement og dokument.getElementById () -metode

I JavaScript, "dokument.getElementById ()”Metode brukes for tilgang til et element basert på ID og“ved trykk”Brukes til å knytte en hendelse til et HTML -element. Mer spesifikt kan denne kombinasjonen brukes på en slik måte når den ekstra knappen klikkes, inngangsfeltelementet vil være tilgjengelig, og den angitte verdien vil bli fjernet.

Eksempel

For det første, tilordne en inngangstype med en ID kalt som “Navn”:

Opprett deretter en knapp med en verdi som heter “klar”Og legg til en“ved trykk”Hendelse som vil få tilgang til ClearInput () -funksjonen når den utløses:

Nå, definer en funksjon som heter “ClearInput ()”. Her, dokumentet.getElementById () vil få tilgang til inngangsfeltet ved å bruke ID -en. Deretter en "hvis”Tilstand vil bli brukt slik at så lenge inngangsfeltet ikke er tomt, vil verdien av inngangsfeltet bli satt som tomt:

funksjon clearInput ()
var getValue = dokument.getElementById ("Navn");
hvis (getValue.verdi != "")
getValue.verdi = "";

I dette scenariet vil klikke på den la til knappen fjerne inndatafeltverdien:

Ønsker å tilbakestille alle inngangsfeltverdier samtidig? Sjekk ut neste metode.

Metode 3: Fjern inngangsfelt i JavaScript ved hjelp av RESET () -metode

“nullstille()”Metoden tømmer alle verdiene til formelementene. Denne metoden kan implementeres for å fjerne inngangsfeltet som holder tekst med et klikk på en knapp.

Syntaks

FormObject.nullstille()

Her, “FormObject”Er elementet som vil tilbakestilles.

Ta en titt på det gitte eksemplet.

Eksempel

Først må du lage et skjema og tilordne det en ID som demonstrert nedenfor. Neste, be brukeren om å oppgi en “Id”I inngangsfeltet. Inkluder deretter en knapp med en "ved trykk”Hendelse som får tilgang til en funksjon som diskutert i forrige metode:

Id:

Til slutt erklærer en funksjon som heter “ClearInput ()”, Hent skjemaet ved hjelp av dokumentet.getElementById () -metode og tilbakestiller inndatafeltet på knappeklikk:

funksjon clearInput ()
dokument.getElementById ("Form").nullstille();

Produksjon

Vi har demonstrert teknikkene for å fjerne inngangsfelt i JavaScript.

Konklusjon

For å fjerne inngangsfelt i JavaScript, bruk "Onfokus”Arrangement og“mål”Eiendom for å anvende funksjonaliteten basert på tilstedeværelsen av en bestemt verdi, eller“ved trykk()”Arrangement og“dokument.getElementById ()”Metode for å få ID for inngangsfeltet og rydde feltet så lenge det er en viss verdi i det eller“nullstille()”Metode for å tilbakestille verdiene til alt inngangsfeltet samtidig. Denne oppskrivningen har forklart metodene for å fjerne de spesifiserte inngangsfeltene i JavaScript.