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.