El día de hoy les mostrare 3 formas de deshabilitar inputs HTML de manera rápida y sencilla, lo haremos con JavaScript y HTML.
Cada una tiene sus ventajas sobre la otra, quédate hasta el final del post para que veas cual se adapta mejor a tu proyecto.
Para este ejercicio solo creare una interfaz html sencilla con tres etiquetas <input>
A cada etiqueta <input> le asigne un Id para identificarla de las demás, y le agregue un placeholder para especificar bajo que método se va a deshabilitar.
Deshabilitar inputs con JavaScript readOnly y HTML readOnly
Vamos a deshabilitar el primer input con una propiedad de JavaScript llamada readOnly, es decir solo lectura.
Accedemos al elemento por medio del ID y le asignamos la propiedad de solo lectura en true; de esta manera estamos indicando mediante JS que el input es de solo lectura.
Ahora utilizaremos la misma propiedad readOnly pero la insertaremos como atributo en nuestra etiqueta HTML
Input deshabilitado mediante readOnly
La diferencia entre este método de deshabilitar un input y los otros dos que veras mas adelante es que con esta opción de readOnly ya sea en HTML o JavaScript es que los valores que estén dentro del input si serán enviados dentro de algún formulario si así lo quisiese.
Además de que el elemento input si seria tomado en cuenta al momento de navegar dentro de la pagina con la tecla de tabulación.
Deshabilitando input con JavaScript mediante disabled.
Para deshabilitar el input con este método solo basta una linea de código.
De igual manera hacemos referencia al identificador de la etiqueta, le pasamos la propiedad de disabled en true y listo. Recuerda que si el input tuviera un valor precargado no se podría enviar dentro de un formulario con este metodo.
No olvides que para ingresar codigo JavaScript tiene que ser dentro de las etiquetas <script> </script> o bien en un archivo aparte debidamente enlazado.
Input deshabilitado mediante disabled JavaScript
Deshabilitar inputs con HTML mediante atributo disabled
Este ultimo método es muy similar al anterior, con la única diferencia de que el atributo disabled se declara dentro de la etiqueta input
Toma en cuenta que al igual que el anterior <input> no podrán ser detectados por la navegación con tabulador dentro de una pagina.
Así luce un input deshabilitado mediante atributo HTML:
Etiqueta input deshabilitada con el atributo disabled en HTML
Recuerda que por los últimos dos métodos no se pueden enviar los datos, con el primero si ya que no se desactiva solo pasa a un estado de solo lectura
En conclusión estas fueron las tres formas de deshabilitar inputs con JavaScript y HTML.
Te invito a leer mas publicaciones en mi Blog sobre diferentes tecnologías.
Gracias por leer este artículo y esperamos que encuentres útil esta información. Si tienes preguntas o sugerencias adicionales, no dudes en comentar. ¡Nos encantará escuchar de ti!Hasta la próxima oportunidad, ¡nos despedimos!
Puedes apoyar el blog de diferentes maneras:
Suscribiéndote al Blog.
Apoyando mi trabajo..
Invitándome un café.☕
Seguirme en redes sociales.
o compartir mi contenido en redes sociales. ⬇️