Hvordan legge til og fjerne Readonly attributt i JavaScript

I JavaScript er det websider som krever at du legger inn sensitive data, som ikke bør endres når den er lagt inn eller mens du sender inn et skjema. For eksempel å stille inn filtillatelsene til å være lesbare eller ikke. I slike tilfeller er det veldig effektivt å legge til og fjerne readonly attributter i JavaScript i filhåndtering og sikre de overordnede sikkerhetskravene.

Denne oppskrivningen vil diskutere metoden for å legge til og fjerne en readonly attributt i JavaScript.

Hvordan legge til og fjerne Readonly attributt i JavaScript?

For å legge til og fjerne et readonly attributt i JavaScript, bruk "setAttribute ()”Og“Fjerning ()”Metoder.

“setAttribute ()”Metode tildeler en verdi til en attributt, og“Fjerning ()”Metode fjerner en attributt fra det spesifiserte elementet. Disse metodene kan være assosiert med en "Klikk”Hendelse for å angi den spesifiserte verdien som“readonly”Og begrense fjerningen.

Syntaks

element.setAttribute (navn, verdi)

I syntaks ovenfor, "Navn”Henviser til attributtnavnet, og“verdi”Er den nye verdien som skal tildeles.

element.Fjerning (navn)

Her, “Navn”Henviser til navnet på den aktuelle attributtet.

Gå gjennom følgende eksempel for demonstrasjon.

Eksempel

Først, inkluderer to knapper med "addAttribute”Og“Fjerning”IDS. Disse knappene vil bli brukt for å legge til og fjerne henholdsvis readonly -attributtet. Inkluder også en inngangs -ID som "tekst”For å legge inn tekstdataene:

Legg til attributt
Fjern attributtet

I JavaScript -filen bruker du "dokument.QuerySelector ()”For å hente de ekstra HTML -elementene ved hjelp av deres spesifiserte ID -er:

var addButton = dokument.QuerySelector ('#addattribute');
var removeButton = dokument.querySelector ('#removeeAttribute');
var get = dokument.QuerySelector ('input');

Etter det, bruk "AddEventListener ()”Metode for å knytte klikkhendelsesbehandleren med SetAttribute () -metoden. Det vil fungere på en slik måte at når "Legg til attributt”-Knappen er klikket, verdien av inngangsfeltet blir satt som“readonly”:

AddButton.AddEventListener ('klikk', () =>
få.setAttribute ('readonly', true);
);

Tilsvarende, gjenta den samme prosedyren for å fjerne SET -attributtet ved å inkludere hendelsen, klikk separat og bruke RemoveAttribute () -metoden:

RemoveButton.AddEventListener ('klikk', () =>
få.removeeAttribute ('readonly');
);

For å teste formål vil vi for det første legge inn en verdi i inndatafeltet og klikke på Attributt -knappen. Som et resultat vil attributtet til merverdien bli satt som readonly. Klikk deretter på Fjern attributtknappen. Du kan merke at verdien fortsatt vil være der (ikke fjernet). Slik vil det gitte programmet fungere:

Vi har gitt de enkleste metodene for å legge til og fjerne readonly attributter i JavaScript.

Konklusjon

For å legge til og fjerne Readonly -attributter i JavaScript, “setAttribute ()”Og“Fjerning ()”Metoder kan brukes for å legge til og fjerne henholdsvis readonly -attributtet ved å hente den tilsvarende knapp -ID, inkludert en hendelsesbehandler og en inngangstype med hver av de implementerte metodene. Denne bloggen forklarte metodene for å legge til og fjerne Readonly -attributter i JavaScript.