V této příručce pochopíme, jak zakázat vstupní pole pomocí CSS. Takže, začněme!
Jak zakázat vstupní pole pomocí CSS?
V CSS jsou události zakázány pomocí „ ukazatel-události ' vlastnictví. Nejprve se tedy seznamte s vlastností pointer-events.
Co je vlastnost CSS „ukazatel-události“?
' ukazatel-události ” řídí, jak prvky HTML reagují nebo se chovají na událost dotyku, jako jsou události kliknutí nebo klepnutí, aktivní stavy nebo stavy najetí myší a zda je kurzor viditelný nebo ne.
Syntax
Syntaxe událostí ukazatele je dána takto:
ukazatel-události : auto | žádný ;
Výše zmíněná vlastnost nabývá dvou hodnot, například „ auto ' a ' žádný “:
- auto: Používá se k provádění výchozích událostí.
- žádný: Používá se k deaktivaci událostí.
Přejděte k uvedenému příkladu.
Příklad 1: Přidání vstupního pole pomocí CSS
V tomto příkladu nejprve vytvoříme div a přidáme k němu nadpis a vstupní pole. Poté nastavte typ vstupu jako „ text “ a nastavte jeho hodnotu jako „ Zadejte své jméno “.
HTML
< div >< centrum >
< h1 > Zakázat vstupní pole < / h1 >
< vstup typ = 'text' hodnota = 'Zadejte své jméno' >
< / centrum >
< / div >
Poté přejděte do CSS a upravte styl div nastavením barvy pozadí jako „ rgb(184, 146, 99) “ a výška jako „ 150 pixelů “.
CSS
div {Pozadí- barva : rgb ( 184 , 146 , 99 ) ;
výška : 150px;
}
Výstup výše popsaného kódu je uveden níže. Zde vidíme, že naše vstupní pole je aktuálně aktivní a přijímá vstup od uživatele:
Nyní přejděte k další části, ve které použijeme hodnotu „ ukazatele-události 'vlastnost jako' žádný “.
Příklad 2: Zakázání vstupního pole pomocí CSS
Nyní použijeme „ vstup ” pro přístup k prvku přidanému do souboru HTML a nastavení hodnoty událostí ukazatele jako “ žádný “:
vstup {ukazatele-události : žádný ;
}
Jakmile implementujete výše uvedenou vlastnost „ ukazatele-události “ s “ žádný “, text vstupního pole nebude možné upravovat, což znamená, že naše vstupní pole je zakázáno:
A je to! Vysvětlili jsme způsob deaktivace vstupního pole pomocí CSS.
Závěr
Chcete-li zakázat vstupní pole v HTML, „ ukazatele-události ” je použita vlastnost CSS. Chcete-li to provést, přidejte vstupní pole a nastavte hodnotu událostí ukazatele jako „ žádný ” pro deaktivaci vstupního pole. V této příručce vysvětlíme způsob deaktivace vstupního pole pomocí CSS a poskytneme jeho příklad.