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/salesforce">Siły sprzedaży</a> </div> <div class="white-news__name"> <a href="http://pl.cyberaxe.org/article/salesforce-apex---governor-limits">Salesforce Apex - Gubernator ograniczenia</a> </div> <div class="white-news__text"> Samouczek na temat granic gubernatora i jak można je obsłużyć dla różnych scenariuszy, używa.... </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-programming">Programowanie C</a> </div> <div class="white-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-implement-a-queue-in-c">Jak wdrożyć kolejkę w C</a> </div> <div class="white-news__text"> W programowaniu C kolejki są liniową formą struktury danych, w której możemy dodawać i usuwać elemen... </div> <div class="white-news__author"> <a href="http://pl.cyberaxe.org/author/larysa-witczak">Larysa Witczak</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pl.cyberaxe.org/category/c-programming">Programowanie C</a> </div> <div class="white-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-compile-and-run-a-c-program-in-command-prompt">Jak skompilować i uruchomić program C w wierszu polecenia</a> </div> <div class="white-news__text"> W wierszu polecenia Windows możesz łatwo skompilować i uruchomić program C za pośrednictwem GCC. Pos... </div> <div class="white-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="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/matplotlib-2d-histogram">MATPLOTLIB 2D Histogram</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/maja-kucharski">Maja Kucharski</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/javascript">JavaScript</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/what-does-w-metacharacter-do-in-regexp-of-javascript">Co robi W Metacharacter w Regexp of JavaScript</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/javascript">JavaScript</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-typescript-is-different-from-javascript">Jak TypeScript różni się od JavaScript?</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/html">html</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-add-and-play-videos-on-a-webpage-using-html">Jak dodawać i odtwarzać filmy na stronie internetowej za pomocą HTML?</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/oracle-database">Baza danych Oracle</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-find-oracle-service-name">Jak znaleźć nazwę usługi Oracle?</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/typescript">Maszynopis</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/what-is-typescript-and-how-to-use-it">Co to jest maszynopis i jak go używać?</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/what-is-math-max-method-in-c">Co to jest matematyka.Metoda maksymalna 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> <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-the-get-command-command-in-powershell">Jak używać polecenia „Get-command” w PowerShell</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/bruno-dobrowolski">Bruno Dobrowolski</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/ubuntu">Ubuntu</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-take-screenshots-from-the-login-shell--of-ubuntudebian-server">Jak robić zrzuty ekranu ze skorupy logowania Ubuntu/Debian Server</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/bertram-jozwiak">Bertram Jóźwiak</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/salesforce">Siły sprzedaży</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/salesforce-apex---date-format">Salesforce APEX - Format daty</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> <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>