Le champ de saisie est utilisé pour créer des formulaires et prendre les commentaires de l'utilisateur. Les utilisateurs peuvent remplir le champ de saisie en fonction du type d'entrée. Mais parfois, vous devez désactiver le champ de saisie pour accomplir toute condition préalable, comme la sélection d'une case à cocher. Dans cette situation, vous devez désactiver le champ d'entrée.

Dans ce guide, nous comprendrons comment désactiver le champ d'entrée à l'aide de CSS. Alors, commençons!

Comment désactiver un champ de saisie à l'aide de CSS?

Dans CSS, les événements sont désactivés en utilisant le «événements de pointeur" propriété. Donc, tout d'abord, découvrez la propriété Pointer-Events.

Qu'est-ce que la propriété CSS «Pointer-Events»?

Le "événements de pointeur"Contrôlez comment les éléments HTML réagissent ou se comportent à l'événement tactile, tels que des événements de clic ou de tapotement, des états actifs ou de survol, et si le curseur est visible ou non.

Syntaxe
La syntaxe des événements de pointeur est donnée comme suit:

Pointer-Events: Auto | Aucun;

La propriété de mention ci-dessus prend deux valeurs, telles que «auto" et "aucun»:

• auto: Il est utilisé pour effectuer des événements par défaut.
• aucun: Il est utilisé pour désactiver les événements.

Dirigez-vous vers l'exemple donné.

Exemple 1: ajout d'un champ de saisie à l'aide de CSS

Dans cet exemple, premièrement, nous créerons une div et y ajouterons un champ de ruban et de saisie. Ensuite, définissez le type d'entrée comme «texte»Et définissez sa valeur comme«Entrez votre nom".

Html

Désactiver un champ d'entrée

Après cela, passez au CSS et style le div en définissant sa couleur d'arrière-plan comme «RVB (184, 146, 99)"Et la hauteur comme"150px".

CSS

div
Color en arrière-plan: RVB (184, 146, 99);
hauteur: 150px;

La sortie du code décrit ci-dessus est donnée ci-dessous. Ici, nous pouvons voir que notre champ de saisie est actuellement actif et accepte l'entrée de l'utilisateur:

Maintenant, passez à la partie suivante dans laquelle nous utilisons la valeur du «événements de pointeur«Propriété comme«aucun".

Exemple 2: désactiver un champ de saisie à l'aide de CSS

Nous allons maintenant utiliser "saisir«Pour accéder à l'élément ajouté dans le fichier HTML et définir la valeur des événements de pointeur comme«aucun»:

saisir
Pointer-Events: Aucun;

Une fois que vous avez mis en œuvre la propriété indiquée ci-dessus "événements de pointeur" avec "aucun«Valeur, le texte du champ de saisie sera non modifiable, ce qui indique que notre champ de saisie est désactivé:

C'est ça! Nous avons expliqué la méthode de désactivation du champ de saisie à l'aide de CSS.

Conclusion

Pour désactiver un champ d'entrée dans un HTML, le «événements de pointeur»La propriété du CSS est utilisée. Pour ce faire, ajoutez un champ de saisie et définissez la valeur des événements de pointeur comme «aucun«Pour désactiver le champ de saisie. Dans ce guide, nous expliquons la méthode de désactivation d'un champ de saisie à l'aide de CSS et fournissons un exemple.