Com desactivar un camp d'entrada amb CSS?

Com Desactivar Un Camp D Entrada Amb Css



El camp d'entrada s'utilitza per fer formularis i rebre l'entrada de l'usuari. Els usuaris poden omplir el camp d'entrada segons el tipus d'entrada. Però de vegades, heu de desactivar el camp d'entrada per complir qualsevol condició prèvia, com ara seleccionar una casella de selecció. En aquesta situació, heu de desactivar el camp d'entrada.

En aquesta guia, entendrem com desactivar el camp d'entrada mitjançant CSS. Així doncs, comencem!

Com desactivar un camp d'entrada amb CSS?

En CSS, els esdeveniments es desactiven utilitzant el ' esdeveniments de punter ' propietat. Per tant, primer, aprèn sobre la propietat pointer-eventos.







Què és la propietat CSS 'pointer-events'?

El ' esdeveniments de punter ” controla com responen o es comporten els elements HTML davant l'esdeveniment tàctil, com ara esdeveniments de clic o toc, estats actius o de desplaçament, i si el cursor és visible o no.



Sintaxi
La sintaxi dels esdeveniments de punter es dóna de la següent manera:



esdeveniments de punter : automàtic | cap ;

La propietat esmentada anteriorment pren dos valors, com ara ' automàtic ' i ' cap ”:





  • automàtic: S'utilitza per realitzar esdeveniments predeterminats.
  • cap: S'utilitza per desactivar esdeveniments.

Dirigiu-vos a l'exemple donat.

Exemple 1: Afegir un camp d'entrada amb CSS

En aquest exemple, en primer lloc, crearem un div i afegirem un encapçalament i un camp d'entrada. A continuació, configureu el tipus d'entrada com a ' text ” i estableix el seu valor com a “ Introdueixi el seu nom ”.



HTML

< div >
< centre >
< h1 > Desactivar un camp d'entrada < / h1 >
< entrada tipus = 'text' valor = 'Introdueixi el seu nom' >
< / centre >
< / div >

Després d'això, aneu al CSS i estilitzeu el div establint el seu color de fons com a ' rgb(184, 146, 99) ' i alçada com ' 150 píxels ”.

CSS

div {
fons- color : rgb ( 184 , 146 , 99 ) ;
alçada : 150 píxels;
}

A continuació es mostra la sortida del codi descrit anteriorment. Aquí, podem veure que el nostre camp d'entrada està actualment actiu i accepta l'entrada de l'usuari:

Ara, passeu a la següent part en què utilitzem el valor de ' esdeveniments de punter 'propietat com' cap ”.

Exemple 2: desactivació d'un camp d'entrada mitjançant CSS

Ara farem servir ' entrada ” per accedir a l'element afegit al fitxer HTML i establir el valor dels esdeveniments del punter com a “ cap ”:

entrada {
esdeveniments de punter : cap ;
}

Un cop implementeu la propietat indicada anteriorment ' esdeveniments de punter ' amb ' cap ”, el text del camp d'entrada no serà editable, cosa que indica que el nostre camp d'entrada està desactivat:

Això és! Hem explicat el mètode per desactivar el camp d'entrada mitjançant CSS.

Conclusió

Per desactivar un camp d'entrada en un HTML, el ' esdeveniments de punter S'utilitza la propietat del CSS. Per fer-ho, afegiu un camp d'entrada i definiu el valor dels esdeveniments de punter com a ' cap ” per desactivar el camp d'entrada. En aquesta guia, expliquem el mètode per desactivar un camp d'entrada mitjançant CSS i en proporcionem un exemple.