În acest ghid, vom înțelege cum să dezactivați câmpul de intrare folosind CSS. Deci, să începem!
Cum se dezactivează un câmp de intrare folosind CSS?
În CSS, evenimentele sunt dezactivate utilizând „ pointer-evenimente ” proprietate. Deci, mai întâi, aflați despre proprietatea pointer-events.
Ce este proprietatea CSS „pointer-events”?
„ pointer-evenimente ” controlează modul în care elementele HTML răspund sau se comportă la evenimentul tactil, cum ar fi evenimentele de clic sau atingere, stările active sau de trecere cu mouse-ul și dacă cursorul este vizibil sau nu.
Sintaxă
Sintaxa evenimentelor pointer este dată după cum urmează:
pointer-evenimente : auto | nici unul ;
Proprietatea menționată mai sus are două valori, cum ar fi „ auto ' și ' nici unul ”:
- auto: Este folosit pentru a efectua evenimente implicite.
- nici unul: Este folosit pentru a dezactiva evenimente.
Îndreptați-vă spre exemplul dat.
Exemplul 1: Adăugarea unui câmp de intrare utilizând CSS
În acest exemplu, în primul rând, vom crea un div și îi vom adăuga un titlu și un câmp de intrare. Apoi, setați tipul de intrare ca „ text ” și setați-i valoarea ca „ Introdu numele tau ”.
HTML
< div >< centru >
< h1 > Dezactivați un câmp de intrare < / h1 >
< intrare tip = 'text' valoare = 'Introdu numele tau' >
< / centru >
< / div >
După aceea, treceți la CSS și stilați div-ul setând culoarea de fundal ca „ rgb(184, 146, 99) ” și înălțimea ca “ 150px ”.
CSS
div {fundal- culoare : rgb ( 184 , 146 , 99 ) ;
înălţime : 150px;
}
Rezultatul codului descris mai sus este prezentat mai jos. Aici, putem vedea că câmpul nostru de introducere este activ în prezent și acceptă intrarea de la utilizator:
Acum, treceți la următoarea parte în care folosim valoarea „ pointer-evenimente „proprietate ca „ nici unul ”.
Exemplul 2: Dezactivarea unui câmp de intrare folosind CSS
Vom folosi acum „ intrare ” pentru a accesa elementul adăugat în fișierul HTML și pentru a seta valoarea pointer-events ca „ nici unul ”:
intrare {pointer-evenimente : nici unul ;
}
Odată ce implementați proprietatea menționată mai sus „ pointer-evenimente ' cu ' nici unul ”, textul câmpului de introducere va fi needitabil, ceea ce indică faptul că câmpul nostru de introducere este dezactivat:
Asta e! Am explicat metoda de dezactivare a câmpului de intrare folosind CSS.
Concluzie
Pentru a dezactiva un câmp de introducere într-un HTML, „ pointer-evenimente ” este utilizată proprietatea CSS. Pentru a face acest lucru, adăugați un câmp de intrare și setați valoarea evenimentelor pointer ca „ nici unul ” pentru a dezactiva câmpul de introducere. În acest ghid, explicăm metoda de dezactivare a unui câmp de intrare folosind CSS și oferim un exemplu al acestuia.