U ovom ćemo vodiču steći razumijevanje kako onemogućiti polje za unos pomoću CSS-a. Dakle, počnimo!
Kako onemogućiti polje za unos pomoću CSS-a?
U CSS-u, događaji su onemogućeni pomoću ' pokazivač-događaji ” vlasništvo. Dakle, prvo naučite o svojstvu pointer-events.
Što je svojstvo CSS-a “pointer-events”?
' pokazivač-događaji ” kontroliraju kako HTML elementi reagiraju ili se ponašaju na događaj dodira, kao što su događaji klika ili dodira, aktivna stanja ili stanja lebdenja te je li kursor vidljiv ili ne.
Sintaksa
Sintaksa događaja pokazivača dana je na sljedeći način:
pokazivač-događaji : auto | nikakav ;
Gore spomenuto svojstvo ima dvije vrijednosti, kao što je ' auto ' i ' nikakav ”:
- auto: Koristi se za izvođenje zadanih događaja.
- nijedan: Koristi se za onemogućavanje događaja.
Krenite prema navedenom primjeru.
Primjer 1: Dodavanje polja za unos pomoću CSS-a
U ovom primjeru, prvo ćemo stvoriti div i dodati mu naslov i polje za unos. Zatim postavite vrstu unosa kao ' tekst ' i postavite njegovu vrijednost kao ' Unesite svoje ime ”.
HTML
< div >< centar >
< h1 > Onemogući polje za unos < / h1 >
< ulazni tip = 'tekst' vrijednost = 'Unesite svoje ime' >
< / centar >
< / div >
Nakon toga prijeđite na CSS i stilizirajte div tako da mu postavite boju pozadine kao ' rgb(184, 146, 99) ', a visina kao ' 150 px ”.
CSS
div {pozadina- boja : rgb ( 184 , 146 , 99 ) ;
visina : 150 px;
}
Izlaz gore opisanog koda dan je u nastavku. Ovdje možemo vidjeti da je naše polje za unos trenutno aktivno i da prihvaća unos od korisnika:
Sada prijeđite na sljedeći dio u kojem koristimo vrijednost ' pokazivač-događaji ' svojstvo kao ' nikakav ”.
Primjer 2: Onemogućavanje polja za unos pomoću CSS-a
Sada ćemo koristiti ' ulazni ” za pristup elementu dodanom u HTML datoteci i postavljanje vrijednosti događaja pokazivača kao “ nikakav ”:
ulazni {pokazivač-događaji : nikakav ;
}
Nakon što implementirate gore navedeno svojstvo ' pokazivač-događaji ” sa “ nikakav ” vrijednost, tekst polja za unos neće se moći uređivati što znači da je naše polje za unos onemogućeno:
To je to! Objasnili smo način onemogućavanja polja za unos pomoću CSS-a.
Zaključak
Da biste onemogućili polje za unos u HTML-u, ' pokazivač-događaji ” koristi se svojstvo CSS-a. Da biste to učinili, dodajte polje za unos i postavite vrijednost događaja pokazivača kao ' nikakav ” za onemogućavanje polja za unos. U ovom vodiču objašnjavamo način onemogućavanja polja za unos pomoću CSS-a i dajemo primjer toga.