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/php">Php</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-php-strsplit-function">So verwenden Sie die Funktion PHP Str_split</a> </div> <div class="white-news__text"> Die Funktion PHP str_split () ist ein nützliches Werkzeug, um Zeichenfolgen in einzelne Zeichen oder... </div> <div class="white-news__author"> <a href="http://www.cyberaxe.org/author/ahmed-stockert">Ahmed Stöckert</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://www.cyberaxe.org/category/php">Php</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-addslashes-function-in-php">So verwenden Sie die Funktion der AddSlashes -Funktion in PHP</a> </div> <div class="white-news__text"> fügtslashes () -Funktion in PHP fügt eine Backslash (\) vor Sonderzeichen wie Zitate, Apostrophes un... </div> <div class="white-news__author"> <a href="http://www.cyberaxe.org/author/jean-dengler">Jean Dengler</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/what-are-identifiers-in-c">Was sind Kennungen in C++?</a> </div> <div class="white-news__text"> In einem Programm werden C ++ - Kennungen verwendet, um auf die Namen von Variablen, Funktionen und ... </div> <div class="white-news__author"> <a href="http://www.cyberaxe.org/author/mohamed-flore">Mohamed Flore</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/python">Python</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/python-call-static-method-within-class">Python rufen Sie eine statische Methode innerhalb der Klasse auf</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/arved-riermeier">Arved Riermeier</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/python">Python</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-do-i-check-if-a-string-is-empty-in-python">Wie überprüfe ich, ob eine Zeichenfolge in Python leer ist</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/frederik-rodehau">Frederik Rodehau</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/windows-os">Windows OS</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/what-is-the-difference-between-windows-top-10-home-and-pro">Was ist der Unterschied zwischen Windows Top 10 Home und Pro</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/kaya-wyludda">Kaya Wyludda</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/oracle-database">Oracle -Datenbank</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/do-oracle-fusion-considered-better-than-sap">Betrachtet man Oracle Fusion als besser als SAP??</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/php">Php</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-arrayreverse-function-in-php">So verwenden Sie Array_reverse -Funktion in PHP</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/stephan-harms">Stephan Harms</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/html">html</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-create-html-bullet-points">So erstellen Sie HTML -Bullet -Punkte?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/jessica-schimmer">Jessica Schimmer</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/a-comparison-between-cloudtrail-and-guardduty">Ein Vergleich zwischen CloudTrail und GuardDuty</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/fr-chris-frisch">Fr. Chris Frisch</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/what-is-rename-item-command-in-powershell">Was ist umbenannte Befehl in PowerShell umbenannt?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/stephan-harms">Stephan Harms</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/git">Git</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-create-a-git-repository-for-local-projects">So erstellen Sie ein Git -Repository für lokale Projekte?</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/how-to-use-the-defer-keyword-in-golang">So verwenden Sie das Defer -Schlüsselwort in Golang</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/ansgar-radtke">Ansgar Radtke</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>