V tejto príručke pochopíme, ako zakázať vstupné pole pomocou CSS. Takže, začnime!
Ako zakázať vstupné pole pomocou CSS?
V CSS sú udalosti zakázané pomocou „ ukazovateľ-udalosti ' nehnuteľnosť. Najprv sa teda zoznámte s vlastnosťou pointer-events.
Čo je vlastnosť CSS „ukazovateľ-udalosti“?
' ukazovateľ-udalosti ” ovládať, ako prvky HTML reagujú alebo sa správajú na udalosť dotyku, ako sú udalosti kliknutia alebo klepnutia, aktívne stavy alebo stavy kurzora a či je kurzor viditeľný alebo nie.
Syntax
Syntax udalostí ukazovateľa je daná takto:
ukazovateľ-udalosti : auto | žiadny ;
Vyššie uvedená vlastnosť nadobúda dve hodnoty, ako napríklad „ auto “ a „ žiadny “:
- auto: Používa sa na vykonávanie predvolených udalostí.
- žiadne: Používa sa na deaktiváciu udalostí.
Choďte k uvedenému príkladu.
Príklad 1: Pridanie vstupného poľa pomocou CSS
V tomto príklade najprv vytvoríme div a pridáme k nemu nadpis a vstupné pole. Potom nastavte typ vstupu ako „ text “ a nastavte jeho hodnotu ako „ Zadajte svoje meno “.
HTML
< div >< centrum >
< h1 > Zakázať vstupné pole < / h1 >
< vstup typu = 'text' hodnotu = 'Zadajte svoje meno' >
< / centrum >
< / div >
Potom prejdite do CSS a upravte štýl div nastavením farby pozadia ako „ rgb(184, 146, 99) “ a výška ako „ 150 pixelov “.
CSS
div {pozadie- farba : rgb ( 184 , 146 , 99 ) ;
výška : 150px;
}
Výstup vyššie opísaného kódu je uvedený nižšie. Tu vidíme, že naše vstupné pole je momentálne aktívne a prijíma vstup od používateľa:
Teraz prejdite na ďalšiu časť, v ktorej použijeme hodnotu „ ukazovateľ-udalosti “vlastnosť ako “ žiadny “.
Príklad 2: Zakázanie vstupného poľa pomocou CSS
Teraz použijeme „ vstup “, aby ste získali prístup k prvku pridanému do súboru HTML a nastavte hodnotu ukazovateľa-udalostí ako „ žiadny “:
vstup {ukazovateľ-udalosti : žiadny ;
}
Akonáhle implementujete vyššie uvedenú vlastnosť “ ukazovateľ-udalosti “ s “ žiadny “, text vstupného poľa nebude možné upravovať, čo znamená, že naše vstupné pole je zakázané:
To je všetko! Vysvetlili sme spôsob deaktivácie vstupného poľa pomocou CSS.
Záver
Ak chcete zakázať vstupné pole v HTML, „ ukazovateľ-udalosti ” sa používa vlastnosť CSS. Ak to chcete urobiť, pridajte vstupné pole a nastavte hodnotu udalostí ukazovateľa ako „ žiadny ” na deaktiváciu vstupného poľa. V tejto príručke vysvetľujeme metódu deaktivácie vstupného poľa pomocou CSS a uvádzame jej príklad.