Habilitar/deshabilitar campos de entrada usando JavaScript

Mientras crea un formulario o un cuestionario, existe el requisito de solicitar al usuario en un punto determinado al completar un campo de entrada. Por ejemplo, limitar el número de caracteres dentro de un campo i.mi. "No contacta". Además de eso, para aplicar una condición de requisito previo para llenar un campo en particular, etc. En tal caso, escenarios, habilitar/deshabilitar los campos de entrada en JavaScript es un enfoque muy conveniente tanto para el desarrollador como para el final del usuario.

Este tutorial explicará los enfoques para habilitar/deshabilitar los campos de entrada utilizando JavaScript.

Cómo habilitar/deshabilitar los campos de entrada usando JavaScript?

Para habilitar/deshabilitar los campos de entrada utilizando JavaScript, los siguientes enfoques se pueden utilizar en combinación con el "desactivado" propiedad:

• "al hacer clic" evento.
• "addEventListener ()" método.

Enfoque 1: Habilitar/deshabilitar campos de entrada usando JavaScript usando el evento OnClick

Un "al hacer clicEl evento se utiliza para redirigir a la función especificada. Este evento se puede aplicar para invocar la función correspondiente para habilitar y deshabilitar los campos de entrada en el clic del botón.

Ejemplo

Echemos un vistazo al ejemplo declarado a continuación:

Habilitar/deshabilitar el campo de texto

En el código indicado anteriormente, realice los siguientes pasos:

• Incluir una entrada "texto"Campo con el especificado"identificación" y "marcador de posición" valores.
• Además, cree dos botones separados con adjunto "al hacer clic"Eventos redirigiendo a dos funciones diferentes para habilitar y deshabilitar los campos de entrada respectivamente.

Continuemos a la parte de JavaScript del código:

En el fragmento de código anterior, realice los siguientes pasos:

• Declarar una función llamada "DisableField ()".
• En su definición, acceda al campo de entrada creado por su "identificación" utilizando el "documento.getElementById ()" método
• En el siguiente paso, aplique el "desactivado"Propiedad y asigna el valor booleano"verdadero". Esto dará como resultado deshabilitar el campo de entrada en el clic del botón.
• Del mismo modo, defina una función llamada "Habilitarfield ()".
• En su definición, de manera similar, repita el paso discutido para acceder al campo de entrada.
• Aquí, asigne el "desactivado"Propiedad como"FALSO". Esto dará como resultado habilitar el campo de entrada deshabilitado.

Producción

En la salida anterior, se puede observar que el campo de entrada está deshabilitado y habilitado correctamente sobre el clic del botón correspondiente.

Enfoque 2: Habilitar/deshabilitar los campos de entrada usando JavaScript usando el método addEventListener ()

El "addEventListener ()El método se utiliza para adjuntar un evento al elemento. Este método se puede implementar para deshabilitar y habilitar un campo de entrada basado en el evento adjunto y el especificado "llave".

Sintaxis

En la sintaxis anterior:

• "evento"Se refiere al nombre del evento.
• "función"Señala la función para ejecutar.
• "usar"Es el parámetro opcional.

Ejemplo

Observemos el ejemplo de Stado a continuación:

Habilitar/deshabilitar el campo de texto

En las líneas de código anteriores:

• Incluir el encabezado declarado.
• En el siguiente paso, repita el método discutido en el enfoque anterior para incluir un campo de entrada que tenga el especificado "identificación" y "marcador de posición" valores.

Pasemos a la parte JavaScript del código:

En el fragmento de código anterior, realice los siguientes pasos:

• Acceder al campo de entrada por su "identificación" utilizando el "documento.getElementById ()" método.
• En el siguiente paso, aplique el "addEventListener ()"Método y adjunte un evento llamado"llave".
• En el código adicional, asigne el "desactivado"Propiedad como"FALSO"Para habilitar el campo de entrada.
• Por último, en el "demás"Condición, asignar el"desactivado"Propiedad como"verdadero"Para deshabilitar el campo de entrada habilitado al presionar el"Ingresar" llave.

Producción

De la salida anterior, es evidente que el campo de entrada se deshabilita al presionar el "Ingresar" llave.

Conclusión

El "desactivado"Propiedad en combinación con el"al hacer clic"Evento o el"addEventListener ()El método "se puede aplicar para habilitar/deshabilitar los campos de entrada utilizando JavaScript. El enfoque anterior se puede utilizar para redirigir a la función correspondiente para habilitar/deshabilitar el campo de entrada al hacer clic en el botón. El último enfoque se puede implementar para realizar la funcionalidad requerida basada en el evento adjunto y el especificado "llave". Este artículo explica cómo habilitar/deshabilitar los campos de entrada en JavaScript.