Ebben az útmutatóban megértjük, hogyan lehet letiltani a beviteli mezőt CSS használatával. Szóval, kezdjük!
Hogyan lehet letiltani a beviteli mezőt CSS használatával?
A CSS-ben az események letiltása a „ pointer-események ' ingatlan. Tehát először ismerje meg a pointer-events tulajdonságot.
Mi az a „pointer-events” CSS-tulajdon?
Az ' pointer-események ” szabályozza, hogy a HTML-elemek hogyan reagáljanak vagy viselkedjenek az érintési eseményre, például kattintási vagy koppintási eseményekre, aktív vagy lebegtető állapotokra, és hogy a kurzor látható-e vagy sem.
Szintaxis
A mutatóesemények szintaxisa a következő:
pointer-események : auto | egyik sem ;
A fent említett tulajdonság két értéket vesz fel, például ' auto ” és „ egyik sem ”:
- auto: Az alapértelmezett események végrehajtására szolgál.
- egyik sem: Az események letiltására szolgál.
Irány a megadott példa.
1. példa: Beviteli mező hozzáadása CSS használatával
Ebben a példában először létrehozunk egy div-t, és hozzáadunk egy címsort és egy beviteli mezőt. Ezután állítsa be a beviteli típust a következőre: szöveg ' és állítsa be az értékét ' Adja meg nevét ”.
HTML
< div >< központ >
< h1 > Beviteli mező letiltása < / h1 >
< bemenet típus = 'szöveg' érték = 'Adja meg nevét' >
< / központ >
< / div >
Ezt követően lépjen a CSS-re, és stílusozza a div háttérszínét a következőre: rgb(184, 146, 99) ' és magassága ' 150 képpont ”.
CSS
div {háttér- szín : rgb ( 184 , 146 , 99 ) ;
magasság : 150 képpont;
}
A fent leírt kód kimenete alább látható. Itt láthatjuk, hogy a beviteli mezőnk jelenleg aktív, és elfogadja a felhasználó bevitelét:
Most lépjen a következő részre, amelyben a „ pointer-események ' tulajdonság mint ' egyik sem ”.
2. példa: Beviteli mező letiltása CSS használatával
Most a ' bemenet ” a HTML-fájlban hozzáadott elem eléréséhez, és a pointer-események értékének beállításához „ egyik sem ”:
bemenet {pointer-események : egyik sem ;
}
Miután megvalósította a fent említett tulajdonságot ' pointer-események ' val vel ' egyik sem ” érték, a beviteli mező szövege nem szerkeszthető, ami azt jelzi, hogy a beviteli mezőnk le van tiltva:
Ez az! Elmagyaráztuk a beviteli mező CSS használatával történő letiltásának módját.
Következtetés
Egy beviteli mező letiltásához HTML-ben, a „ pointer-események ” a CSS tulajdonságot használják. Ehhez adjon hozzá egy beviteli mezőt, és állítsa be a mutatóesemények értékét a következőre: egyik sem ” a beviteli mező letiltásához. Ebben az útmutatóban bemutatjuk a beviteli mező CSS használatával történő letiltásának módját, és példát mutatunk rá.