Dans ce guide, nous allons comprendre comment désactiver le champ de saisie à l'aide de CSS. Alors, commençons !
Comment désactiver un champ de saisie à l'aide de CSS ?
En CSS, les événements sont désactivés en utilisant le ' événements-pointeur ' propriété. Alors, tout d'abord, découvrez la propriété pointer-events .
Qu'est-ce que la propriété CSS 'pointer-events' ?
La ' événements-pointeur ” contrôlent la façon dont les éléments HTML répondent ou se comportent à l'événement tactile, tels que les événements de clic ou de pression, les états actifs ou de survol, et si le curseur est visible ou non.
Syntaxe
La syntaxe des événements-pointeurs est donnée comme suit :
événements-pointeur : auto | rien ;
La propriété mentionnée ci-dessus prend deux valeurs, telles que ' auto ' et ' rien ” :
- auto: Il est utilisé pour effectuer des événements par défaut.
- rien: Il est utilisé pour désactiver les événements.
Dirigez-vous vers l'exemple donné.
Exemple 1 : Ajouter un champ de saisie à l'aide de CSS
Dans cet exemple, nous allons tout d'abord créer une div et y ajouter un titre et un champ de saisie. Ensuite, définissez le type d'entrée sur ' texte ' et définissez sa valeur sur ' Entrez votre nom ”.
HTML
< div >< centre >
< h1 > Désactiver un champ de saisie < / h1 >
< saisir taper = 'texte' évaluer = 'Entrez votre nom' >
< / centre >
< / div >
Après cela, passez au CSS et stylisez la div en définissant sa couleur d'arrière-plan sur ' RVB (184, 146, 99) ' et la hauteur comme ' 150px ”.
CSS
div {Contexte- Couleur : RVB ( 184 , 146 , 99 ) ;
la taille : 150 pixels ;
}
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 la saisie de l'utilisateur :
Maintenant, passez à la partie suivante dans laquelle nous utilisons la valeur du ' événements-pointeur « propriété en tant que » rien ”.
Exemple 2 : Désactivation d'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 de pointer-events sur “ rien ” :
saisir {événements-pointeur : rien ;
}
Une fois que vous implémentez la propriété ci-dessus ' événements-pointeur ' avec ' rien ”, le texte du champ de saisie sera non éditable 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 de saisie dans un HTML, le ' événements-pointeur ” 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 sur ' rien ” 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 en donnons un exemple.