JavaScript -Tastaturereignisse

Interaktionen zwischen HTML und JavaScript werden durch Ereignisse definiert. Vom Laden einer Seite bis zum Drücken einer Taste oder der Größe eines Fensters usw. werden als Ereignisse betrachtet. JavaScript -Ereignisse sind in HTML DOM Version 2 und Version 3 enthalten. Es gibt eine große Kategorie von JavaScript-Ereignissen, die durch Manipulation einer Webseite über einen Benutzer oder den Browser auftreten können. In diesem Artikel werden wir jedoch speziell über Ereignisse sprechen, die mit einer Tastatur passieren.

Die Ereignisse, die auftreten, wenn eine Tastaturtaste gedrückt wird. Die Ereignisse, die unter die Kategorie der Tastaturereignisse fallen, sind:

Onkeydown -Ereignis
Onkeypress -Event
ONKEYUP -Event

Hier werden wir diese oben genannten Ereignisse im Detail beleuchten.

Onkeydown -Ereignis

Wenn eine Tastaturtaste gedrückt wird. Es sprudelt und ist auch stornierbar. Diese Veranstaltung unterstützt alle anderen HTML -Tags als andere als , ,
, , , , , , , , und und sind in DOM Version 2 enthalten.</p> <p><strong>Syntax</strong><br>Die Syntax des OneKeydown -Ereignisses ist wie folgt</p> <p><strong>HTML -Syntax</strong><br> </p> <p><strong>JavaScript -Syntax</strong><br>Objekt.OnKeydown = function () script;</p> <p><strong>JavaScript addEventListener () Syntax</strong><br>Objekt.AddEventListener ("Keydown", Skript); </p> <p>Beispiel</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>Im obigen Beispiel wurde ein Eingabefeld erstellt. Wenn der Benutzer eine Tastaturtaste drückt, wird das Onkeydown -Ereignis ausgelöst, und die Hintergrundfarbe des Eingangsfeldes ändert sich zu Pink.</p> <p>Ausgang</p> <p>Vor dem Drücken einer Tastaturtaste.</p> <p>Nach dem Drücken einer Tastaturtaste innerhalb des Eingangsfeldes.</p> <p>Onkeypress -Event</p> <p>Wenn eine Tastaturtaste gedrückt wird. Es sprudelt und ist auch stornierbar. Diese Veranstaltung unterstützt alle anderen HTML -Tags als andere als , , <br>, , , <iframe>, , , , , und und sind in DOM Version 2 enthalten.</p> <p><strong>Syntax</strong><br>Die Syntax des OneKeypress -Ereignisses ist wie folgt</p> <p><strong>HTML -Syntax</strong><br> </p> <p><strong>JavaScript -Syntax</strong><br>Objekt.OnKeypress = function () script;</p> <p><strong>JavaScript addEventListener () Syntax</strong><br>Objekt.AddEventListener ("Schlüsselpress", Skript); </p> <p>Beispiel</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>Im obigen Beispiel wird ein Eingabefeld erstellt. Wenn ein Benutzer während des Eingangsfeldes eine Tastaturtaste drückt, wird das OnKeypress -Ereignis stattfinden und die Hintergrundfarbe des Eingabefeldes ändert sich zu Pink.</p> <p><strong>Ausgang</strong><br>Vor dem Drücken einer Taste.</p> <p>Nach dem Drücken einer Tastaturtast.</p> <p>ONKEYUP -Event</p> <p>Wenn ein Tastaturschlüssel veröffentlicht wird, passiert das OnKeyUp -Event. Es sprudelt und ist auch stornierbar. Diese Veranstaltung unterstützt alle anderen HTML -Tags als andere als , , <br>, , , <iframe>, , , , , und und sind in DOM Version 2 enthalten.</p> <p><strong>Syntax</strong><br>Die Syntax des OneKeyUps -Ereignisses ist wie folgt</p> <p><strong>HTML -Syntax</strong><br> </p> <p><strong>JavaScript -Syntax</strong><br>Objekt.OnKeyUp = function () script;</p> <p><strong>JavaScript addEventListener () Syntax</strong><br>Objekt.AddEventListener ("KeyUp", Skript); </p> <p>Beispiel</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>Im obigen Beispiel werden sowohl Onkeydown- als auch Onkeyup -Ereignisse demonstriert. Es wird ein Eingabefeld erstellt. Wenn Sie auf eine Taste drücken, wird das Onkeydown -Ereignis ausgelöst und die Hintergrundfarbe für Eingänge Feld wird sich in Pink verwandelt. Wenn Sie eine Taste veröffentlichen.</p> <p><strong>Ausgang</strong><br>Wenn der Benutzer im Feld Eingabe eine Taste drückt.</p> <p>Nach der Veröffentlichung des Schlüssels.</p> <p>Abschluss</p> <p>Ereignisse, die aufgrund des Drückens einer Tastaturtaste auftreten, werden als JavaScript -Mausereignisse bezeichnet. Ereignisse, die in die Kategorie der JavaScript -Tastaturereignisse eingeteilt werden. Alle diese Ereignisse haben unterschiedliche Zwecke und sie werden in diesem Artikel ausführlich detailliert erörtert.</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://www.cyberaxe.org/article/java-math-class-methods--explained-with-examples">« Java -Mathematikunterrichtsmethoden | Mit Beispielen erklärt</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://www.cyberaxe.org/article/javascript-object-accessors">JavaScript -Objektzubehör »</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://www.cyberaxe.org/category/java">Java</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/java-method-examples">Beispiele für Java -Methoden</a> </div> <div class="white-news__text"> Tutorial über Java -Methoden, die Verwendung der Zugriffsmodifikatoren, um den Umfang der Methoden i... </div> <div class="white-news__author"> <a href="http://www.cyberaxe.org/author/hussein-burkhard">Hussein Burkhard</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://www.cyberaxe.org/category/debian">Debian</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/how-to-install-and-use-libreoffice-on-debian">So installieren und verwenden Sie Libreoffice auf Debian</a> </div> <div class="white-news__text"> Um LibreOffice auf Debian zu installieren und zu verwenden, gibt es zwei Möglichkeiten, wie sie sich... </div> <div class="white-news__author"> <a href="http://www.cyberaxe.org/author/jessica-schimmer">Jessica Schimmer</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://www.cyberaxe.org/category/c">C ++</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-function-references-in-c">So verwenden Sie Funktionsreferenzen in C ++</a> </div> <div class="white-news__text"> Funktionsreferenzen im Vergleich zu herkömmlichen Funktionsaufrufen können Programmierer ganze Funkt... </div> <div class="white-news__author"> <a href="http://www.cyberaxe.org/author/jean-dengler">Jean Dengler</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://www.cyberaxe.org/category/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/what-is-docker-bind-mounts">Was ist Docker -Bindungshalterungen?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/christopher-lammert">Christopher Lammert</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/golang">Golang</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/what-are-structures-in-golang">Was sind Strukturen in Golang?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/hussein-burkhard">Hussein Burkhard</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/c">C ++</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-chrono-in-c">Wie man Chrono in C verwendet++?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/lars-daub">Lars Daub</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/java">Java</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-convert-a-map-to-a-string-in-java">So konvertieren Sie eine Karte in eine Zeichenfolge in Java?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/gian-eisenlauer">Gian Eisenlauer</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-aws-systems-manager-session-manager">So verwenden Sie AWS Systems Manager Session Manager Manager?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/gian-eisenlauer">Gian Eisenlauer</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/powershell">Power Shell</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-get-adprincipalgroupmembership--in-powershell">So verwenden Sie Get-Adprincipalgroupmitglieder in Powershell</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/ahmed-stockert">Ahmed Stöckert</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/c">C ++</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-boolean-expressions-in-c">So verwenden Sie Boolesche Ausdrücke in C ++</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/ahmed-stockert">Ahmed Stöckert</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/c">C ++</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-switch-statement-in-c">So verwenden Sie die Switch -Anweisung in C++?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/lars-daub">Lars Daub</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/php">Php</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-strlen-function-in-php">So verwenden Sie Strlen -Funktion in PHP</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/mohamed-flore">Mohamed Flore</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/golang">Golang</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/what-is-golang-testing-package">Was ist Golang -Testpaket?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/mohamed-flore">Mohamed Flore</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Eine Seite über das Linux-Betriebssystem. Hier finden Sie viele interessante Artikel und nützliche Ratgeber</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://www.cyberaxe.org/category/python">Python</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/postgresql">PostgreSQL</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/windows-os">Windows OS</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://www.cyberaxe.org/category/docker">Docker</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/c-sharp">c scharf</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/r">R</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/oracle-database">Oracle -Datenbank</a></li> </li> <li class="menu-item"><a href="http://www.cyberaxe.org/all-categories"><b>Alle Kategorien</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>