I denne guide vil vi få en forståelse af, hvordan du deaktiverer inputfeltet ved hjælp af CSS. Så lad os begynde!
Hvordan deaktiverer man et inputfelt ved hjælp af CSS?
I CSS deaktiveres begivenheder ved at bruge ' pointer-begivenheder ” ejendom. Så lær først om pointer-events-egenskaben.
Hvad er 'pointer-events' CSS Property?
Det ' pointer-begivenheder ” kontrollere, hvordan HTML-elementerne reagerer eller opfører sig på berøringshændelsen, såsom klik- eller trykhændelser, aktive tilstande eller svævetilstande, og om markøren er synlig eller ej.
Syntaks
Syntaksen for pointer-hændelser er givet som følger:
pointer-begivenheder : auto | ingen ;
Ovenstående egenskab har to værdier, såsom ' auto ' og ' ingen ”:
- auto: Det bruges til at udføre standardhændelser.
- ingen: Det bruges til at deaktivere begivenheder.
Gå mod det givne eksempel.
Eksempel 1: Tilføjelse af et inputfelt ved hjælp af CSS
I dette eksempel vil vi først oprette en div og tilføje en overskrift og inputfelt til den. Indstil derefter inputtypen som ' tekst ' og indstil dens værdi som ' Indtast dit navn ”.
HTML
< div >< centrum >
< h1 > Deaktiver et inputfelt < / h1 >
< input type = 'tekst' værdi = 'Indtast dit navn' >
< / centrum >
< / div >
Derefter skal du flytte til CSS og style div'en ved at indstille dens baggrundsfarve som ' rgb(184, 146, 99) ' og højde som ' 150 px ”.
CSS
div {baggrund- farve : rgb ( 184 , 146 , 99 ) ;
højde : 150px;
}
Outputtet af den ovenfor beskrevne kode er givet nedenfor. Her kan vi se, at vores inputfelt i øjeblikket er aktivt og accepterer input fra brugeren:
Gå nu til næste del, hvor vi bruger værdien af ' pointer-begivenheder ' ejendom som ' ingen ”.
Eksempel 2: Deaktivering af et inputfelt ved hjælp af CSS
Vi vil nu bruge ' input ' for at få adgang til -elementet tilføjet i HTML-filen og indstille værdien af pointer-hændelser som ' ingen ”:
input {pointer-begivenheder : ingen ;
}
Når du implementerer den ovennævnte egenskab ' pointer-begivenheder ' med ' ingen ”-værdi, vil teksten i inputfeltet ikke kunne redigeres, hvilket indikerer, at vores inputfelt er deaktiveret:
Det er det! Vi har forklaret metoden til at deaktivere inputfeltet ved hjælp af CSS.
Konklusion
For at deaktivere et inputfelt i en HTML, skal ' pointer-begivenheder ” egenskab af CSS bruges. For at gøre det skal du tilføje et inputfelt og indstille værdien af pointer-hændelser som ' ingen ” for at deaktivere indtastningsfeltet. I denne vejledning forklarer vi metoden til at deaktivere et inputfelt ved hjælp af CSS og giver et eksempel på det.