Šajā rokasgrāmatā mēs iegūsim izpratni par to, kā atspējot ievades lauku, izmantojot CSS. Tātad, sāksim!
Kā atspējot ievades lauku, izmantojot CSS?
Pakalpojumā CSS pasākumi tiek atspējoti, izmantojot rādītājs-notikumi ” īpašums. Tātad, vispirms uzziniet par rādītāja notikumu rekvizītu.
Kas ir “pointer-events” CSS rekvizīts?
' rādītājs-notikumi ” kontrolē, kā HTML elementi reaģē vai uzvedas uz pieskāriena notikumu, piemēram, noklikšķināšanas vai pieskāriena notikumus, aktīvus vai kursora novietošanas stāvokļus, un to, vai kursors ir redzams vai nē.
Sintakse
Rādītāja notikumu sintakse ir norādīta šādi:
rādītājs-notikumi : auto | neviens ;
Iepriekš minētajam īpašumam ir divas vērtības, piemēram, ' auto ' un ' neviens ”:
- auto: To izmanto noklusējuma notikumu veikšanai.
- neviens: To izmanto, lai atspējotu notikumus.
Dodieties uz doto piemēru.
1. piemērs: ievades lauka pievienošana, izmantojot CSS
Šajā piemērā, pirmkārt, mēs izveidosim div un pievienosim tam virsrakstu un ievades lauku. Pēc tam iestatiet ievades veidu kā ' tekstu un iestatiet tā vērtību kā ' Ievadiet savu vārdu ”.
HTML
< div >< centrs >
< h1 > Atspējot ievades lauku < / h1 >
< ievade veids = 'teksts' vērtību = 'Ievadiet savu vārdu' >
< / centrs >
< / div >
Pēc tam pārejiet uz CSS un veidojiet div, iestatot tā fona krāsu kā ' rgb(184, 146, 99) ' un augstums kā ' 150 pikseļi ”.
CSS
div {fons- krāsa : rgb ( 184 , 146 , 99 ) ;
augstums : 150 pikseļi;
}
Iepriekš aprakstītā koda izvade ir norādīta zemāk. Šeit mēs redzam, ka mūsu ievades lauks pašlaik ir aktīvs un pieņem ievadi no lietotāja:
Tagad pārejiet uz nākamo daļu, kurā mēs izmantojam vērtību ' rādītājs-notikumi ' īpašums kā ' neviens ”.
2. piemērs. Ievades lauka atspējošana, izmantojot CSS
Tagad mēs izmantosim ' ievade ”, lai piekļūtu HTML failā pievienotajam elementam un iestatītu rādītāja notikumu vērtību kā “ neviens ”:
ievade {rādītājs-notikumi : neviens ;
}
Kad esat ieviesis iepriekš minēto īpašumu ' rādītājs-notikumi ' ar ' neviens ” vērtību, ievades lauka teksts nebūs rediģējams, kas norāda, ka mūsu ievades lauks ir atspējots:
Tieši tā! Mēs esam izskaidrojuši ievades lauka atspējošanas metodi, izmantojot CSS.
Secinājums
Lai atspējotu ievades lauku HTML, “ rādītājs-notikumi ” tiek izmantots CSS rekvizīts. Lai to izdarītu, pievienojiet ievades lauku un iestatiet rādītāja notikumu vērtību kā ' neviens ”, lai atspējotu ievades lauku. Šajā rokasgrāmatā mēs izskaidrojam ievades lauka atspējošanas metodi, izmantojot CSS, un sniedzam tās piemēru.