Cómo agregar y quitar el atributo de solo lectura en JavaScript
En programación, a veces necesitamos limitar la capacidad de edición de un campo de entrada o formulario para evitar que el usuario cambie el valor de manera accidental o intencional. En caso de querer habilitar la edición, necesitamos también poder remover dicha restricción. Para ello, podemos utilizar el atributo de solo lectura (readonly) en HTML y controlarlo mediante JavaScript. En este artículo, veremos cómo agregar y quitar dicho atributo en campos de entrada y formularios utilizando JavaScript.
📋 Aquí podrás encontrar✍
Agregando el atributo de solo lectura en JavaScript
Para agregar el atributo de solo lectura en un campo de entrada o formulario, podemos utilizar la propiedad readonly. Utilizaremos el método getElementById para acceder al campo y modifica su propiedad:
```
var campoInput = document.getElementById('id-campo-input');
campoInput.readOnly = true;
En el código anterior, accedemos al campo de entrada utilizando el ID del elemento en HTML (id-campo-input) utilizando la función getElementById(). Luego, agregamos la propiedad readOnly y la asignamos a true.
De esta manera, el campo no podrá ser modificado por el usuario.
Quitando el atributo de solo lectura en JavaScript
Si deseamos quitar la restricción de solo lectura y habilitar la edición del campo, podemos modificar la propiedad readOnly del elemento a false, utilizando el mismo método anterior:
```
var campoInput = document.getElementById('id-campo-input');
campoInput.readOnly = false;
En este caso, cambiamos el valor de la propiedad readOnly a false.
Ejemplos de Código
A continuación, se presentan algunos ejemplos de implementaciones utilizando la función anteriormente descrita:
- Agregar atributo de solo lectura a un campo de entrada:
- Quitar atributo de solo lectura y habilitar edición en un campo de entrada:
- Agregar atributo de solo lectura a un formulario:
var campoInput = document.getElementById('id-campo-input');
campoInput.readOnly = true;
var campoInput = document.getElementById('id-campo-input');
campoInput.readOnly = false;
var formulario = document.getElementById('id-formulario');
var inputs = formulario.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
inputs[i].readOnly = true;
}
Conclusión
En este artículo, aprendimos cómo agregar y quitar el atributo de solo lectura en campos de entrada y formularios utilizando JavaScript. Es una forma útil de limitar la edición de ciertos campos y evitar cambios no deseados. Esperamos haber ayudado a entender mejor esta técnica.
Preguntas frecuentes
¿Puedo utilizar el atributo de solo lectura en otros elementos HTML?
Sí, el atributo de solo lectura puede ser utilizado en otros elementos HTML, tales como select, textarea, etc.
¿Puedo añadir el atributo de solo lectura a varios campos a la vez?
Sí, utilizando el método anteriormente implementado, podemos agregar el atributo a varios elementos de forma simultánea, como se muestra en el siguiente ejemplo:
```
var formulario = document.getElementById('id-formulario');
var inputs = formulario.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
inputs[i].readOnly = true;
}
¿Cuál es la diferencia entre el atributo de solo lectura y el atributo de solo escritura?
El atributo de solo lectura (readonly) permite que el usuario pueda visualizar y copiar el contenido del campo, pero no modificarlo. En cambio, el atributo de solo escritura (disabled) deshabilita completamente el campo, impidiendo que se realicen acciones en éste.
Subir
Deja una respuesta