Sa gabay na ito, magkakaroon tayo ng pag-unawa kung paano i-disable ang input field gamit ang CSS. Kaya, magsimula tayo!
Paano I-disable ang isang Input Field Gamit ang CSS?
Sa CSS, hindi pinagana ang mga kaganapan sa pamamagitan ng paggamit ng “ pointer-kaganapan ” ari-arian. Kaya, una, alamin ang tungkol sa property ng pointer-events.
Ano ang 'pointer-events' CSS Property?
Ang ' pointer-kaganapan ” kontrolin kung paano tumutugon o kumikilos ang mga elemento ng HTML sa kaganapan ng pagpindot, gaya ng mga kaganapan sa pag-click o pag-tap, mga estado ng aktibo o pag-hover, at kung nakikita o hindi ang cursor.
Syntax
Ang syntax ng pointer-events ay ibinigay bilang mga sumusunod:
pointer-kaganapan : sasakyan | wala ;
Ang pag-aari na binanggit sa itaas ay tumatagal ng dalawang halaga, tulad ng ' sasakyan 'at' wala ”:
- sasakyan: Ito ay ginagamit upang magsagawa ng mga default na kaganapan.
- wala: Ito ay ginagamit upang huwag paganahin ang mga kaganapan.
Tumungo sa ibinigay na halimbawa.
Halimbawa 1: Pagdaragdag ng Input Field Gamit ang CSS
Sa halimbawang ito, una, gagawa tayo ng div at magdagdag ng heading at input field dito. Pagkatapos, itakda ang uri ng input bilang ' text ” at itakda ang halaga nito bilang “ Ilagay ang Iyong Pangalan ”.
HTML
< div >< gitna >
< h1 > I-disable ang Isang Input Field < / h1 >
< input uri = 'text' halaga = 'Ilagay ang Iyong Pangalan' >
< / gitna >
< / div >
Pagkatapos nito, lumipat sa CSS at i-istilo ang div sa pamamagitan ng pagtatakda ng kulay ng background nito bilang “ rgb(184, 146, 99) 'at taas bilang' 150px ”.
CSS
div {background- kulay : rgb ( 184 , 146 , 99 ) ;
taas : 150px;
}
Ang output ng inilarawan sa itaas na code ay ibinigay sa ibaba. Dito, makikita namin na ang aming input field ay kasalukuyang aktibo at tinatanggap ang input mula sa user:
Ngayon, lumipat sa susunod na bahagi kung saan ginagamit namin ang halaga ng ' pointer-kaganapan ” ari-arian bilang “ wala ”.
Halimbawa 2: Hindi Paganahin ang isang Input Field Gamit ang CSS
Gagamitin natin ngayon ang ' input ” para ma-access ang element na idinagdag sa HTML file at itakda ang halaga ng pointer-events bilang “ wala ”:
input {pointer-kaganapan : wala ;
}
Sa sandaling ipatupad mo ang nabanggit na pag-aari ' pointer-kaganapan 'may' wala ” value, ang text ng input field ay magiging non-editable na nagsasaad na ang aming input field ay hindi pinagana:
Ayan yun! Ipinaliwanag namin ang paraan ng hindi pagpapagana ng input field gamit ang CSS.
Konklusyon
Upang huwag paganahin ang isang input field sa isang HTML, ang ' pointer-kaganapan ” ang pag-aari ng CSS ay ginagamit. Upang gawin ito, magdagdag ng isang input field, at itakda ang halaga ng pointer-events bilang ' wala ” upang huwag paganahin ang input field. Sa gabay na ito, ipinapaliwanag namin ang paraan ng hindi pagpapagana ng input field gamit ang CSS at nagbibigay ng halimbawa nito.