Cómo agregar y eliminar el atributo Readonly en JavaScript

En JavaScript, hay páginas web que requieren que ingrese datos confidenciales, que no deben modificarse una vez ingresados ​​o mientras envían un formulario. Por ejemplo, configurar los permisos de archivo para que sean legibles o no. En tales casos, agregar y eliminar los atributos Readonly en JavaScript es muy efectivo en el manejo de archivos y garantizar los requisitos generales de seguridad.

Este artículo discutirá el método para agregar y eliminar un atributo de lectura en JavaScript.

Cómo agregar y eliminar el atributo Readonly en JavaScript?

Para agregar y eliminar un atributo Readonly en JavaScript, aplique el "setAttribute ()" y "removeattribute ()" métodos.

El "setAttribute ()"El método asigna un valor a un atributo y el"removeattribute ()El método "elimina un atributo del elemento especificado. Estos métodos pueden estar asociados con un "hacer clic"Evento para establecer el valor especificado como"solo lectura"Y restringir su eliminación.

Sintaxis

elemento.setAttribute (nombre, valor)

En la sintaxis anterior, "nombre"Se refiere al nombre del atributo y"valor"¿Es el nuevo valor a asignar.

elemento.RemoveAttribute (nombre)

Aquí, "nombre"Se refiere al nombre del atributo particular.

Realice el siguiente ejemplo para la demostración.

Ejemplo

En primer lugar, incluya dos botones con "addattribute" y "eliminar"IDS. Estos botones se utilizarán para agregar y eliminar el atributo Readonly, respectivamente. Además, incluya una ID de entrada como "texto"Para ingresar los datos de texto:

Agregar atributo
Eliminar atributo

En el archivo JavaScript, use el "documento.QuerySelector ()"Para obtener los elementos HTML agregados con la ayuda de sus ID especificados:

var addButton = documento.QuerySelector ('#addattribute');
var removeButton = documento.QuerySelector ('#removeattribute');
var get = documento.QUERYSELECTER ('Entrada');

Después de eso, aplique el "addEventListener ()Método "para adjuntar el controlador de eventos de clic con el método setattribute (). Funcionará de tal manera que cuando el "Agregar atributo"Se hace clic en el botón, el valor del campo de entrada se establecerá como"solo lectura":

addButton.addEventListener ('click', () =>
conseguir.setAttribute ('readonly', true);
);

Del mismo modo, repita el mismo procedimiento para eliminar el atributo establecido al incluir el evento Haga clic por separado y aplicando el método RemoveAttribute ():

removerButton.addEventListener ('click', () =>
conseguir.RemoveAttribute ('Readonly');
);

Para fines de prueba, en primer lugar, ingresaremos un valor en el campo de entrada y haremos clic en el botón Agregar atributo. Como resultado, el atributo del valor agregado se establecerá como Readonly. Luego, haga clic en el botón Eliminar el atributo. Puede notar que el valor aún estará allí (no eliminado). Así es como funcionará el programa dado:

Hemos proporcionado los métodos más simples para agregar y eliminar los atributos Readonly en JavaScript.

Conclusión

Para agregar y eliminar los atributos Readonly en JavaScript, el "setAttribute ()" y "removeattribute ()Los métodos se pueden utilizar para agregar y eliminar el atributo Readonly respectivamente obteniendo la ID del botón correspondiente, incluido un controlador de eventos y un tipo de entrada con cada uno de los métodos implementados. Este blog explicó los métodos para agregar y eliminar los atributos de lectura en JavaScript.