Aktiver/deaktiver inndatafelt ved hjelp av JavaScript

Mens du oppretter et skjema eller et spørreskjema, er det et krav om å be brukeren på et bestemt punkt mens han fyller ut et inngangsfelt. For eksempel å begrense antall tegn i et felt i.e. “kontaktnummer”. I tillegg til det, for å bruke en forutsetning for å fylle et bestemt felt osv. I slike tilfeller er scenarier, å aktivere/deaktivere inngangsfelt i JavaScript en veldig praktisk tilnærming for både utvikleren og brukerens slutt.

Denne opplæringen vil forklare tilnærmingene for å aktivere/deaktivere inngangsfelt ved hjelp av JavaScript.

Hvordan aktivere/deaktivere inndatafelt ved hjelp av JavaScript?

For å aktivere/deaktivere inndatafelt ved hjelp av JavaScript, kan følgende tilnærminger brukes i kombinasjon med "funksjonshemmet”Eiendom:

• “ved trykk" begivenhet.
• “AddEventListener ()”Metode.

Tilnærming 1: Aktiver/deaktiver inndatafelt ved hjelp av JavaScript ved hjelp av OnClick -hendelsen

En "ved trykk”Hendelsen brukes til å omdirigere til den spesifiserte funksjonen. Denne hendelsen kan brukes på å påkalle den tilsvarende funksjonen for å aktivere og deaktivere inndatafelt på knappeklikk.

Eksempel

La oss ta en titt på det under-uttalte eksemplet:

Aktiver/deaktiver tekstfelt

I den ovennevnte koden, utfør følgende trinn:

• Inkluderer en inngang "tekst”Feltet har det spesifiserte”id”Og“stedholder”Verdier.
• Lag også to separate knapper med vedlagt "ved trykk”Hendelser omdirigerer til to forskjellige funksjoner for å aktivere og deaktivere inngangsfeltene henholdsvis.

La oss fortsette til JavaScript -delen av koden:

I ovennevnte kodebit, utfør følgende trinn:

• Erklære en funksjon som heter “DisableField ()”.
• I sin definisjon få tilgang til det opprettede inngangsfeltet av sitt “id" bruker "dokument.getElementById ()”Metode
• I neste trinn, bruk "funksjonshemmet”Eiendom og tilordne den den boolske verdien”ekte”. Dette vil resultere i å deaktivere inngangsfeltet på knappeklikk.
• Tilsvarende definer en funksjon som heter “EnableField ()”.
• I sin definisjon, på samme måte, gjenta trinnet som er diskutert for tilgang til inngangsfeltet.
• Her, tilordne “funksjonshemmet”Eiendom som“falsk”. Dette vil resultere i å muliggjøre det funksjonshemmede inngangsfeltet.

Produksjon

I outputten ovenfor kan det observeres at inngangsfeltet er deaktivert og aktivert riktig på tilsvarende knappeklikk.

Tilnærming 2: Aktiver/deaktiver inndatafelt ved hjelp av JavaScript ved hjelp av AddEventListener () -metoden

“AddEventListener ()”Metoden brukes til å knytte en hendelse til elementet. Denne metoden kan implementeres for å deaktivere og aktivere et inngangsfelt basert på den vedlagte hendelsen og den spesifiserte “nøkkel”.

Syntaks

I syntaks ovenfor:

• “begivenhet”Henviser til navnet på arrangementet.
• “funksjon”Peker på funksjonen for å utføre.
• “bruk”Er den valgfrie parameteren.

Eksempel

La oss observere det under-uttalte eksemplet:

Aktiver/deaktiver tekstfelt

I kodelinjene ovenfor:

• Inkluder den angitte overskriften.
• I neste trinn, gjenta metoden som er diskutert i forrige tilnærming for å inkludere et inngangsfelt som har den spesifiserte “id”Og“stedholder”Verdier.

La oss gå videre til JavaScript -delen av koden:

I ovennevnte kodebit, utfør følgende trinn:

• Få tilgang til inngangsfeltet av dets “id" bruker "dokument.getElementById ()”Metode.
• I neste trinn, bruk "AddEventListener ()”Metode og fest en hendelse som heter“Keydown”.
• I den videre koden, tilordne “funksjonshemmet”Eiendom som“falsk”For å aktivere inngangsfeltet.
• Til slutt, i "ellers”Tilstand, tildel“funksjonshemmet”Eiendom som“ekte”For å deaktivere det aktiverte inngangsfeltet ved å trykke på“Tast inn”Nøkkel.

Produksjon

Fra output ovenfor er det tydelig at inngangsfeltet blir deaktivert ved å trykke på "Tast inn”Nøkkel.

Konklusjon

“funksjonshemmet”Eiendom i kombinasjon med“ved trykk”Arrangement eller“AddEventListener ()”Metode kan brukes for å aktivere/deaktivere inngangsfelt ved hjelp av JavaScript. Den tidligere tilnærmingen kan brukes til å omdirigere til den tilsvarende funksjonen for å aktivere/deaktivere inngangsfeltet på knappeklikket. Den sistnevnte tilnærmingen kan implementeres for å utføre den nødvendige funksjonaliteten basert på den vedlagte hendelsen og den spesifiserte “nøkkel”. Denne artikkelen forklarer hvordan du aktiverer/deaktiverer inndatafelt i JavaScript.