Wydarzenia klawiatury JavaScript

Interakcje między HTML i JavaScript są zdefiniowane przez zdarzenia. Od załadowania strony do naciśnięcia dowolnego klucza lub rozmiaru okna itp. Są uważane za zdarzenia. Wydarzenia JavaScript są zawarte w HTML DOM w wersji 2 i wersji 3. Istnieje ogromna kategoria zdarzeń JavaScript, która może się zdarzyć poprzez manipulowanie stroną internetową za pośrednictwem użytkownika lub przeglądarki, jednak w tym zapisie będziemy mówić konkretnie o zdarzeniach, które zdarzają się za pomocą klawiatury.

Wydarzenia, które zdarzają się, gdy naciśnięty jest klawisz klawiatury, są określane jako zdarzenia klawiatury JavaScript, które są częścią obiektu klawiatury. Wydarzenia, które należą do kategorii zdarzeń klawiatury, to:

Wydarzenie Onkeydown
Wydarzenie Onkeypress
Wydarzenie Onkeyup

Tutaj szczegółowo rzucimy światło na te wyżej wymienione wydarzenia.

Wydarzenie Onkeydown

Kiedy naciskany jest klawisz klawiatury, zdarza się wydarzenie Onkeydown. Bubbles i można również anulować. To wydarzenie obsługuje wszystkie tagi HTML inne niż , ,
, , , , , , , , i są zawarte w wersji 2 DOM.</p> <p><strong>Składnia</strong><br>Składnia wydarzenia OneKeydown jest następująca</p> <p><strong>Składnia HTML</strong><br> </p> <p><strong>Składnia JavaScript</strong><br>obiekt.onkeydown = function () script;</p> <p><strong>Składnia JavaScript addEventListener ()</strong><br>obiekt.addEventListener („Keydown”, skrypt); </p> <p>Przykład</p> <!DOCTYPE html><br><html><br><body><br><br><script><br>function functionName() <br>alert("You just pressed a key while inside the input field!");<br><br></script><br></body><br></html> <p>W powyższym przykładzie utworzono pole wejściowe. Podczas gdy w polu wejściowym, gdy użytkownik naciśnie klawisz klawiatury, zdarzenie Onkeydown uruchomi się, a kolor tła pola wejściowego zmieni się na różowy.</p> <p>Wyjście</p> <p>Przed naciśnięciem klawisza klawiatury.</p> <p>Po naciśnięciu klawisza klawiatury wewnątrz pola wejściowego.</p> <p>Wydarzenie Onkeypress</p> <p>Gdy naciskany jest klawisz klawiatury, zdarza się wydarzenie OnKeypress. Bubbles i można również anulować. To wydarzenie obsługuje wszystkie tagi HTML inne niż , , <br>, , , <iframe>, , , , , i są zawarte w wersji 2 DOM.</p> <p><strong>Składnia</strong><br>Składnia zdarzenia OneKeypress jest następująca</p> <p><strong>Składnia HTML</strong><br> </p> <p><strong>Składnia JavaScript</strong><br>obiekt.onkeypress = function () script;</p> <p><strong>Składnia JavaScript addEventListener ()</strong><br>obiekt.addEventListener („Keypress”, skrypt); </p> <p>Przykład</p> <!DOCTYPE html><br><html><br><body><br><br><script><br>function functionName() <br>document.getElementById("tutorial").style.backgroundColor = "pink";<br><br></script><br></body><br></html> <p>W powyższym przykładzie tworzone jest pole wejściowe. Gdy użytkownik naciska klawisz klawiatury podczas przebywania w polu wejściowym, zdarzenie OnKeypress będzie miało miejsce, a kolor tła pola wejściowego zmieni się na różowy.</p> <p><strong>Wyjście</strong><br>Przed naciśnięciem klawisza.</p> <p>Po naciśnięciu klawisza klawiatury kolor tła pola wejściowego zmienia się na różowy.</p> <p>Wydarzenie Onkeyup</p> <p>Po wydaniu klawisza klawiatury wydarzy się wydarzenie OnkeyUp. Bubbles i można również anulować. To wydarzenie obsługuje wszystkie tagi HTML inne niż , , <br>, , , <iframe>, , , , , i są zawarte w wersji 2 DOM.</p> <p><strong>Składnia</strong><br>Składnia wydarzenia OneKeyUps jest następująca</p> <p><strong>Składnia HTML</strong><br> </p> <p><strong>Składnia JavaScript</strong><br>obiekt.onKeyUp = function () script;</p> <p><strong>Składnia JavaScript addEventListener ()</strong><br>obiekt.addEventListener („KeyUp”, skrypt); </p> <p>Przykład</p> <!DOCTYPE html><br><html><br><body><br><br><script><br>function keydownFunction() <br>document.getElementById("tutorial").style.backgroundColor = "pink";<br><br>function keyupFunction() <br>document.getElementById("tutorial").style.backgroundColor = "yellow";<br><br></script><br></body><br></html> <p>W powyższym przykładzie pokazano zarówno wydarzenia Onkeydown, jak i Onkeyup. Tworzone jest pole wejściowe. Po naciśnięciu klawisza zdarzenie Onkeydown zostanie uruchomione, a kolor tła pola wejściowego zmieni się w różowy, a po wydaniu klucza uruchomi się wydarzenie OnkeyUp, a kolor tła stanie się żółty.</p> <p><strong>Wyjście</strong><br>Gdy użytkownik naciska klawisz w polu wejściowym.</p> <p>Po wydaniu klucza.</p> <p>Wniosek</p> <p>Zdarzenia, które występują z powodu naciśnięcia przycisku klawiatury, są określane jako zdarzenia myszy JavaScript. Wydarzenia, które są sklasyfikowane w kategorii wydarzeń klawiatury JavaScript to wydarzenie Onkeydown, wydarzenie Onkeypress, wydarzenie Onkeyup. Wszystkie te wydarzenia mają różne cele i są szczegółowo omówione wraz z odpowiednimi przykładami, w niniejszym zapisie.</p> </div> <div class="rek-block rek-block-article"> </div> <ul class="prev-next"> <li class="prev-next__item prev-next__item--left"><a href="http://pl.cyberaxe.org/article/java-math-class-methods--explained-with-examples">« Metody klasy matematycznej Java | Wyjaśniono przykładami</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://pl.cyberaxe.org/article/javascript-object-accessors">Akcesorory obiektów JavaScript »</a></li> </ul> <style> .prev-next { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 20px 0; list-style: none; gap: 30px; } .prev-next li { max-width: 50%; } .prev-next__item { display: inline-block; font-weight: bold; } .prev-next__item--left { text-align: left; } .prev-next__item--right { text-align: right; } @media(max-width: 768px) { .prev-next li { max-width: 85%; } .prev-next__item--left { align-self: flex-start; } .prev-next__item--right { align-self: flex-end; } .prev-next { display: flex; flex-direction: column; } } </style> </div> <div class="col-xl-4"> <div class="sidebar-news"> <div class="rek-block rek-block-sidebar"> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pl.cyberaxe.org/category/c-sharp">c ostre</a> </div> <div class="white-news__name"> <a href="http://pl.cyberaxe.org/article/what-is-switch-expression-in-c">Co to jest wyrażenie przełącznika w C#</a> </div> <div class="white-news__text"> Przełącz wyrażenia, pozwalają na konstruowanie kompaktowego i ekspresyjnego kodu, który ocenia tylko... </div> <div class="white-news__author"> <a href="http://pl.cyberaxe.org/author/justyna-flak">Justyna Flak</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pl.cyberaxe.org/category/powershell">PowerShell</a> </div> <div class="white-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-use-the-get-command-command-in-powershell">Jak używać polecenia „Get-command” w PowerShell</a> </div> <div class="white-news__text"> CMDLET „Get-command” otrzymuje listę poleceń dostępnych na komputerze. Ponadto może importować moduł... </div> <div class="white-news__author"> <a href="http://pl.cyberaxe.org/author/bruno-dobrowolski">Bruno Dobrowolski</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pl.cyberaxe.org/category/c">C ++</a> </div> <div class="white-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-use-function-references-in-c">Jak używać odniesień do funkcji w C ++</a> </div> <div class="white-news__text"> Odniesienia do funkcji, w porównaniu z konwencjonalnymi wywołaniami funkcji, pozwól programistom wys... </div> <div class="white-news__author"> <a href="http://pl.cyberaxe.org/author/albert-szczesniak">Albert Szcześniak</a> </div> </div> </div> </div> </div> </div> <div class="container"> <div class="my-slider"> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/python">Pyton</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/pandas-readcsv-multiprocessing">Pandas read_csv multiprocessing</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/oliwia-makowski">Oliwia Makowski</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/oracle-database">Baza danych Oracle</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/do-oracle-fusion-considered-better-than-sap">Czy Oracle Fusion uważane za lepsze niż sap?</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/larysa-witczak">Larysa Witczak</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/golang">Golang</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/what-are-data-types-in-golang">Jakie są typy danych w Golang</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/albert-szczesniak">Albert Szcześniak</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/java">Jawa</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/what-is-import-java-io--in-java">Co to jest import Java.io.*; w Javie?</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/justyna-flak">Justyna Flak</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/powershell">PowerShell</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-use-get-adprincipalgroupmembership--in-powershell">Jak korzystać z get-adprincipalgroupmembership w PowerShell</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/sebastian-kaczynski">Sebastian Kaczyński</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/c-sharp">c ostre</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/difference-between--operator-and-equals-method-in-c">Różnica między == operator a metodą równych w C#?</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/albert-szczesniak">Albert Szcześniak</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/c-programming">Programowanie C</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/books-and-guides-for-c-language">Książki i przewodniki dla języka C</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/pani-julia-szwed">Pani Julia Szwed</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/c-programming">Programowanie C</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-find-the-ascii-value-of-a-character-in-c-programming">Jak znaleźć wartość ASCII znaku w programowaniu C?</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/pani-alicja-szafranski">Pani Alicja Szafrański</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/sqlite">Sqlite</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/what-are-sqlite-and-sqlite3-are-they-the-same">Co to są SQLITE i SQLITE3? Czy oni są tacy sami?</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/renata-borowiec">Renata Borowiec</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/c">C ++</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-use-subtraction-assignment--operator-in-c">Jak używać operatora przypisania odejmowania w C ++</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/renata-borowiec">Renata Borowiec</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Witryna poświęcona systemowi operacyjnemu Linux. Tutaj znajdziesz wiele ciekawych artykułów i przydatnych poradników</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/python">Pyton</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/postgresql">PostgreSQL</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/windows-os">System systemu Windows</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/docker">Doker</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/c-sharp">c ostre</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/r">R</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/oracle-database">Baza danych Oracle</a></li> </li> <li class="menu-item"><a href="http://pl.cyberaxe.org/all-categories"><b>Wszystkie kategorie</b></a></li> </ul> </div> </div> </div> </footer> <script src="/assets/artline/js/app.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script> const images = document.querySelectorAll('img'); for (let i = 0; i < images.length; i++) { images[i].onerror = function() { this.src = 'https://cyberaxe.org/storage/img/nophoto.jpg'; } } </script> </body> </html>