W tym przewodniku zrozumiemy, jak wyłączyć pole wejściowe za pomocą CSS. Zacznijmy więc!
Jak wyłączyć pole wejściowe za pomocą CSS?
W CSS zdarzenia są wyłączane za pomocą „ wskaźniki-wydarzenia ' własność. Więc najpierw poznaj właściwość pointer-events.
Co to jest właściwość CSS „pointer-events”?
„ wskaźniki-wydarzenia ” określają, w jaki sposób elementy HTML reagują lub zachowują się na zdarzenie dotyku, takie jak zdarzenia kliknięcia lub dotknięcia, stany aktywności lub najechania oraz czy kursor jest widoczny, czy nie.
Składnia
Składnia zdarzeń wskaźnika jest podana w następujący sposób:
wskaźniki-wydarzenia : automatyczny | Żaden ;
Wspomniana wyżej właściwość przyjmuje dwie wartości, takie jak „ automatyczny ' oraz ' Żaden ”:
- automatyczny: Służy do wykonywania domyślnych zdarzeń.
- Żaden: Służy do wyłączania zdarzeń.
Kieruj się w stronę podanego przykładu.
Przykład 1: Dodawanie pola wejściowego za pomocą CSS
W tym przykładzie najpierw utworzymy div i dodamy do niego nagłówek i pole wejściowe. Następnie ustaw typ wejścia jako „ tekst ” i ustaw jego wartość jako „ Wpisz swoje imię ”.
HTML
< div >< środek >
< h1 > Wyłącz pole wejściowe < / h1 >
< Wejście rodzaj = 'tekst' wartość = 'Wpisz swoje imię' >
< / środek >
< / div >
Następnie przejdź do CSS i stylizuj div, ustawiając jego kolor tła jako „ RGB (184, 146, 99) ” i wzrost jako „ 150px ”.
CSS
div {tło- kolor : RGB ( 184 , 146 , 99 ) ;
wzrost : 150px;
}
Dane wyjściowe opisanego powyżej kodu podano poniżej. Tutaj widzimy, że nasze pole wejściowe jest aktualnie aktywne i akceptuje dane wejściowe od użytkownika:
Teraz przejdź do następnej części, w której używamy wartości „ wskaźniki-wydarzenia ” właściwość jako „ Żaden ”.
Przykład 2: Wyłączanie pola wejściowego za pomocą CSS
Będziemy teraz używać „ Wejście ”, aby uzyskać dostęp do elementu dodanego w pliku HTML i ustawić wartość zdarzeń wskaźnika jako „ Żaden ”:
Wejście {wskaźniki-wydarzenia : Żaden ;
}
Po wdrożeniu powyższej właściwości” wskaźniki-wydarzenia ' z ' Żaden ”, tekst pola wejściowego będzie nieedytowalny, co oznacza, że nasze pole wejściowe jest wyłączone:
Otóż to! Wyjaśniliśmy metodę wyłączania pola wejściowego za pomocą CSS.
Wniosek
Aby wyłączyć pole wejściowe w kodzie HTML, „ wskaźniki-wydarzenia wykorzystywana jest właściwość CSS. Aby to zrobić, dodaj pole wejściowe i ustaw wartość zdarzeń wskaźnika na „ Żaden ”, aby wyłączyć pole wprowadzania. W tym przewodniku wyjaśniamy metodę wyłączania pola wejściowego za pomocą CSS i podajemy przykład.