Come aggiungere e rimuovere l'attributo lettura in JavaScript

In JavaScript, ci sono pagine Web che richiedono di inserire dati sensibili, che non dovrebbero essere modificati una volta immessi o durante l'invio di un modulo. Ad esempio, l'impostazione delle autorizzazioni del file in modo da leggibili o meno. In tali casi, l'aggiunta e la rimozione di attributi lettura in JavaScript è molto efficace nella gestione dei file e nella garanzia dei requisiti di sicurezza complessivi.

Questo articolo discuterà il metodo per aggiungere e rimuovere un attributo lettura in JavaScript.

Come aggiungere e rimuovere l'attributo lettura in JavaScript?

Per aggiungere e rimuovere un attributo lettura in JavaScript, applica il "setAttribute ()" E "removeattribute ()"Metodi.

IL "setAttribute ()"Metodo assegna un valore a un attributo e"removeattribute ()"Il metodo rimuove un attributo dall'elemento specificato. Questi metodi possono essere associati a "clic"Evento per impostare il valore specificato come"sola lettura"E limita la sua rimozione.

Sintassi

elemento.setAttribute (nome, valore)

Nella sintassi sopra, "nome"Si riferisce al nome dell'attributo e"valore"È il nuovo valore da assegnare.

elemento.removeattribute (nome)

Qui, "nome"Si riferisce al nome dell'attributo particolare.

Passare attraverso il seguente esempio per la dimostrazione.

Esempio

In primo luogo, includi due pulsanti con "Aggiungi attributo" E "rimoveattribute"Ids. Questi pulsanti verranno utilizzati per l'aggiunta e la rimozione dell'attributo readonly, rispettivamente. Inoltre, includi un ID input come "testo"Per inserire i dati di testo:

Aggiungi attributo
Rimuovere l'attributo

Nel file JavaScript, usa il “documento.QuerySelector ()"Per recuperare gli elementi HTML aggiunti con l'aiuto dei loro ID specificati:

var addButton = documento.QuerySelector ('#addAttribute');
var removeButton = documento.QuerySelector ('#removeAttribute');
var get = document.QuerySelector ('Input');

Dopodiché, applica il "addEventListener ()"Metodo per allegare il gestore degli eventi con il metodo setAttribute (). Funzionerà in modo tale che quando il "Aggiungi attributoIl pulsante viene cliccato, il valore del campo di input verrà impostato come "sola lettura":

addButton.addEventListener ('Click', () =>
Ottenere.setAttribute ('readonly', true);
);

Allo stesso modo, ripeti la stessa procedura per la rimozione dell'attributo Imposta includendo l'evento Fare clic separatamente e applicando il metodo RemoveAttribute ():

Rimuovi ilbutton.addEventListener ('Click', () =>
Ottenere.removeattribute ('readonly');
);

Ai fini del test, in primo luogo, inseriremo un valore nel campo di input e fai clic sul pulsante Aggiungi attributo. Di conseguenza, l'attributo del valore aggiunto verrà impostato come lettura. Quindi, fare clic sul pulsante Rimuovi attributo. Potresti notare che il valore sarà ancora lì (non rimosso). Ecco come funzionerà il programma dato:

Abbiamo fornito i metodi più semplici per l'aggiunta e la rimozione di attributi lettura in JavaScript.

Conclusione

Per aggiungere e rimuovere gli attributi readonly in JavaScript, il "setAttribute ()" E "removeattribute ()"I metodi possono essere utilizzati per l'aggiunta e la rimozione rispettivamente dell'attributo readonly recuperando l'ID del pulsante corrispondente, incluso un gestore di eventi e un tipo di input con ciascuno dei metodi implementati. Questo blog ha spiegato i metodi per aggiungere e rimuovere gli attributi readonly in JavaScript.