W scenariuszach takich jak sprawdzanie poprawności i weryfikacja danych styl elementów pola zmienia się po zwolnieniu pojedynczego klawisza na klawiaturze przez użytkownika. Ta zmiana stylu w odniesieniu do każdego naciśnięcia lub zwolnienia klawisza jest wykonywana za pomocą procedur obsługi zdarzeń dostarczonych przez jQuery. Mówiąc konkretnie, procedura obsługi zdarzeń lub metoda, która wykonuje lub wywołuje funkcję po zwolnieniu dowolnego naciśniętego klawisza, to „ klawisz ()' metoda.
Z drugiej strony metodą, która obsługuje lub wywołuje naciśnięcie klawisza funkcyjnego, jest „ wciśnięcie klawisza ()” i możesz sprawdzić naszą powiązaną metodę artykuł dla tego wydarzenia.
W tym blogu przedstawimy krótki opis metody keyup() jQuery.
Jak korzystać z metody keyup() jQuery?
jQuery” klawisz ()” uruchamia funkcję anonimową za każdym razem, gdy użytkownik przestanie naciskać lub wpisywać klawisze w wybranym polu. Metodą tą można również nakładać dynamiczną stylizację na wybrany element w czasie rzeczywistym.
Składnia
Składnia metody keyup() jQuery jest następująca:
$ ( 'Ten' ) . klawisz ( funkcja niestandardowa )
W powyższej składni „ Ten ” to wybrany element HTML, a „ funkcja niestandardowa ” to funkcja wykonywana przez „ klawisz ” metodą „ Ten ”.
Podajmy kilka przykładów dla głębszego zrozumienia.
Przykład 1: Zmiana koloru tekstu przy użyciu metody „keyup()”.
W tym przypadku kolor wpisanego tekstu zostanie zmieniony na inny po zwolnieniu wciśniętego już klawisza, jak pokazano poniżej:
< HTML >
< głowa >
< scenariusz źródło = „https://code.jquery.com/jquery-3.7.0.js” >< / scenariusz >
< scenariusz >
$(dokument).gotowy(funkcja() {
$('#demo').keyup(funkcja() {
$('#demo').css('kolor', 'leśna zieleń');
});
});
< / scenariusz >
< / głowa >
< ciało >
< div >
Wprowadź dane Linuxhinta: < wejście ID = 'próbny' typ = 'tekst' / >
< / div >
< / ciało >
< / HTML >
Opis powyższego kodu znajduje się poniżej:
- Najpierw zaimportuj jQuery do projektu, wstawiając jego internetowy CDN, odwiedzając tę stronę połączyć oficjalnej dokumentacji.
- Następnie utwórz anonimową funkcję, która zostanie wywołana, gdy „ dokument ” lub strona zostanie załadowana. Ta funkcja wybiera element HTML o identyfikatorze „demo” i dołącza „ klawisz ()” metodą.
- „ klawisz ()” wywołuje funkcję wywołania zwrotnego, która wykorzystuje metodę „ css ()”, aby ustawić kolor czcionki tekstu na „ zielony las ”.
- Teraz utwórz wybrany plik „< wejście >” wewnątrz elementu „< ciało >” i przypisz mu identyfikator „ próbny ”.
Podgląd strony po zakończeniu procesu kompilacji:
Dane wyjściowe pokazują zmianę koloru tekstu po zwolnieniu wybranego klawisza.
Przykład 2: Dynamiczna zmiana koloru tła
W tym przykładzie dla wybranego elementu HTML zostaną ustawione różne kolory tła za każdym razem, gdy użytkownik opuści wciśnięty klawisz. Przyjrzyjmy się kodowi tego scenariusza:
< głowa >< scenariusz źródło = „https://code.jquery.com/jquery-3.7.0.js” >< / scenariusz >
< scenariusz >
niech tłoOdcienie = [ 'akwamaryn' , 'pomarańczowy czerwony' , „kadetniebieski” , 'zielony las' ,
'jasny szary' , „piaskowy brąz” , 'magenta' , „burlywood” ] ;
niech j = 0 ;
$ ( dokument ) .klawisz ( funkcjonować ( wydarzenie ) {
$ ( „#hgg” ) .css ( 'kolor tła' , Odcienie tła [ J ] ) ;
j++;
J = J % 9 ;
} ) ;
< / scenariusz >
< / głowa >
< ciało >
< h1 styl = 'kolor: morska zieleń' >Artykuł o Linuxie< / h1 >< br >
< div ID = „hgg” styl = „wypełnienie: 10 pikseli” >
< h2 > Klawiatura jQuery używana do ustawiania różnych Tło za każdym razem, gdy klucz zostanie zwolniony.< / h2 >
< br / >
< / div >
< / ciało >
Opis powyższego kodu:
- Początkowo zaimportuj jQuery do swojego projektu, dodając jQuery CDN w pliku „< głowa >”
- Następnie utwórz tablicę o nazwie „ tłoOdcienie ”, który zawiera osiem losowych kolorów.
- Następnie „ klawisz ()” jest dołączona do metody „ dokument ” i wywołuje anonimową funkcję wywołania zwrotnego. Ta funkcja wybiera element HTML o identyfikatorze „ hgg ” i stosuje CSS „ kolor tła ' nieruchomość.
- Tablica „ tłoOdcienie ” jest przekazywana jako wartość właściwości CSS, a indeks jest ustawiany na „ J ' zmienny. Ta zmienna jest zwiększana za każdym razem o jeden i zaczyna się od „ 0 ” indeks, gdy wartość osiągnie „ 8 ”. Ponieważ maksymalny indeks w tablicy to „ 7 ”.
- Następnie utwórz wybrany „ div ” element o identyfikatorze „ hgg ”, kolor tła tego elementu zostanie zmieniony po zwolnieniu wciśniętego klawisza.
Podgląd strony po kompilacji:
Dane wyjściowe potwierdzają, że kolor tła wybranego elementu HTML zmienia się za każdym razem, gdy naciśnięty lub wybrany klawisz zostanie zwolniony. Chodzi o to, aby używać „ klawisz ()' metoda.
Wniosek
jQuery” klawisz ()” wywołuje funkcję wywołania zwrotnego na wybranym elemencie HTML po zwolnieniu naciśniętego klawisza. Ta metoda nie wywołuje się po naciśnięciu klawisza, ale w momencie puszczenia lub naciśnięcia klawisza funkcja ta wykonuje funkcję wywołania zwrotnego. W tym blogu wyjaśniono użycie i działanie metody jQuery keyup().