Šiame vadove mes suprasime, kaip išjungti įvesties lauką naudojant CSS. Taigi, pradėkime!
Kaip išjungti įvesties lauką naudojant CSS?
CSS įvykiai išjungiami naudojant „ rodyklės įvykiai ' nuosavybė. Taigi, pirmiausia sužinokite apie žymiklio įvykių ypatybę.
Kas yra „pointer-events“ CSS nuosavybė?
„ rodyklės įvykiai “ valdykite, kaip HTML elementai reaguoja arba elgiasi su palietimo įvykiu, pvz., paspaudimo ar bakstelėjimo įvykius, aktyvias ar užvedimo būsenas ir ar žymeklis matomas, ar ne.
Sintaksė
Rodyklės įvykių sintaksė pateikiama taip:
rodyklės įvykiai : automatinis | nė vienas ;
Pirmiau minėta savybė turi dvi reikšmes, pvz., „ automatinis “ ir „ nė vienas “:
- automatinis: Jis naudojamas numatytiesiems įvykiams atlikti.
- nė vienas: Jis naudojamas įvykiams išjungti.
Eikite link pateikto pavyzdžio.
1 pavyzdys: Įvesties lauko pridėjimas naudojant CSS
Šiame pavyzdyje pirmiausia sukursime div ir pridėsime prie jo antraštę ir įvesties lauką. Tada nustatykite įvesties tipą kaip ' tekstą “ ir nustatykite jo reikšmę kaip „ Įveskite savo vardą “.
HTML
< div >< centras >
< h1 > Išjungti įvesties lauką < / h1 >
< įvestis tipo = 'tekstas' vertė = 'Įvesk savo vardą' >
< / centras >
< / div >
Po to pereikite prie CSS ir formuokite div, nustatydami jo fono spalvą kaip „ rgb(184, 146, 99) “ ir aukštis kaip „ 150 piks “.
CSS
div {fonas- spalva : rgb ( 184 , 146 , 99 ) ;
aukščio : 150 taškų;
}
Aukščiau aprašyto kodo išvestis pateikta žemiau. Čia matome, kad mūsų įvesties laukas šiuo metu yra aktyvus ir priima vartotojo įvestį:
Dabar pereikite prie kitos dalies, kurioje naudojame „ rodyklės įvykiai “ nuosavybė kaip “ nė vienas “.
2 pavyzdys: įvesties lauko išjungimas naudojant CSS
Dabar naudosime „ įvestis “ norėdami pasiekti HTML faile pridėtą elementą ir nustatyti žymiklio įvykių reikšmę kaip „ nė vienas “:
įvestis {rodyklės įvykiai : nė vienas ;
}
Įdiegę aukščiau nurodytą nuosavybę “ rodyklės įvykiai ' su ' nė vienas “ reikšmę, įvesties lauko tekstas bus neredaguojamas, o tai rodo, kad mūsų įvesties laukas išjungtas:
Viskas! Mes paaiškinome, kaip išjungti įvesties lauką naudojant CSS.
Išvada
Norėdami išjungti įvesties lauką HTML, „ rodyklės įvykiai “ naudojama CSS nuosavybė. Norėdami tai padaryti, pridėkite įvesties lauką ir nustatykite žymeklio įvykių reikšmę kaip ' nė vienas “ norėdami išjungti įvesties lauką. Šiame vadove paaiškiname įvesties lauko išjungimo naudojant CSS metodą ir pateikiame jo pavyzdį.