Activer / désactiver les champs d'entrée en utilisant JavaScript

Lors de la création d'un formulaire ou d'un questionnaire, il est nécessaire d'inviter l'utilisateur à un certain point tout en remplissant un champ de saisie. Par exemple, limiter le nombre de caractères dans un champ I.e. "NON CONTACT". En plus de cela, pour appliquer une condition préalable pour remplir un champ particulier, etc. Dans de tels cas, l'activation / désactiver les champs d'entrée en JavaScript est une approche très pratique pour la fin du développeur et de l'utilisateur.

Ce tutoriel expliquera les approches pour activer / désactiver les champs d'entrée à l'aide de JavaScript.

Comment activer / désactiver les champs d'entrée en utilisant JavaScript?

Pour activer / désactiver les champs d'entrée à l'aide de JavaScript, les approches suivantes peuvent être utilisées en combinaison avec le «désactivé" propriété:

• "sur clic" événement.
• "addEventListener ()" méthode.

Approche 1: Activer / désactiver les champs d'entrée à l'aide de JavaScript à l'aide de l'événement OnClick

Un "sur clic»L'événement est utilisé pour rediriger vers la fonction spécifiée. Cet événement peut être appliqué pour invoquer la fonction correspondante pour activer et désactiver les champs d'entrée sur le bouton cliquer.

Exemple

Jetons un coup d'œil à l'exemple indiqué ci-dessous:

Activer / désactiver le champ de texte

Dans le code indiqué ci-dessus, effectuez les étapes suivantes:

• Inclure une entrée "texte"Champ ayant le spécifié"identifiant" et "espace réservé" valeurs.
• Créez également deux boutons séparés avec attaché "sur clic»Événements redirigeant vers deux fonctions différentes pour activer et désactiver respectivement les champs d'entrée.

Continuons à la partie javascript du code:

Dans l'extrait de code ci-dessus, effectuez les étapes suivantes:

• Déclarer une fonction nommée «DisableField ()".
• Dans sa définition, accédez au champ de saisie créé par son «identifiant" en utilisant le "document.getElementByid ()" méthode
• Dans l'étape suivante, appliquez le «désactivé«Propriété et attribuez-le la valeur booléenne»vrai". Cela entraînera la désactivation du champ de saisie sur le bouton cliquer.
• De même, définissez une fonction nommée «activerfield ()".
• Dans sa définition, de même, répétez l'étape discutée pour accéder au champ de saisie.
• Ici, affectez le «désactivé«Propriété comme«FAUX". Cela entraînera l'activation du champ de saisie désactivé.

Sortir

Dans la sortie ci-dessus, on peut observer que le champ de saisie est désactivé et activé correctement sur le bouton correspondant cliquer.

Approche 2: Activer / désactiver les champs d'entrée à l'aide de JavaScript à l'aide de la méthode AdVEventListener ()

Le "addEventListener ()»La méthode est utilisée pour attacher un événement à l'élément. Cette méthode peut être implémentée pour désactiver et activer un champ de saisie basé sur l'événement joint et le spécifié "clé".

Syntaxe

Dans la syntaxe ci-dessus:

• "événement»Fait référence au nom de l'événement.
• "fonction»Porte la fonction à exécuter.
• "utiliser"Est le paramètre facultatif.

Exemple

Observons l'exemple indiqué ci-dessous:

Activer / désactiver le champ de texte

Dans les lignes de code ci-dessus:

• Inclure le cap indiqué.
• Dans l'étape suivante, répétez la méthode discutée dans l'approche précédente pour inclure un champ de saisie ayant le spécifié "identifiant" et "espace réservé" valeurs.

Passons à la partie javascript du code:

Dans l'extrait de code ci-dessus, effectuez les étapes suivantes:

• Accéder au champ de saisie par son «identifiant" en utilisant le "document.getElementByid ()" méthode.
• Dans l'étape suivante, appliquez le «addEventListener ()"Méthode et joindre un événement nommé"touche Bas".
• Dans le code supplémentaire, affectez le «désactivé«Propriété comme«FAUX”Pour activer le champ de saisie.
• Enfin, dans le «autre»Condition, allouer le«désactivé«Propriété comme«vrai”Pour désactiver le champ de saisie activé lors d'appuyer sur le«Entrer" clé.

Sortir

À partir de la sortie ci-dessus, il est évident que le champ de saisie est désactivé en appuyant sur le «Entrer" clé.

Conclusion

Le "désactivé«Propriété en combinaison avec le«sur clic”Événement ou"addEventListener ()«La méthode peut être appliquée pour activer / désactiver les champs d'entrée à l'aide de JavaScript. L'ancienne approche peut être utilisée pour rediriger vers la fonction correspondante pour activer / désactiver le champ de saisie sur le bouton cliquer. Cette dernière approche peut être implémentée pour effectuer les fonctionnalités requises en fonction de l'événement joint et de la spécification «clé". Cet article explique comment activer / désactiver les champs d'entrée en javascript.