Die Tastatur ist eines der Hauptgeräte für die menschliche Interaktion mit dem Computer. Web-Entwicklung ist nicht ohne die Verarbeitung von Tastaturtasten möglich. Der Schlüsselpunkt der Interaktion mit der Tastatur einer Webseite ist die Behandlung von Ereignissen, die beim Drücken und Loslassen von Tasten auftreten.
In der Programmiersprache JavaScript gibt es eine Reihe von Ereignissen, mit denen Sie Tastaturereignisse behandeln können. Eine der am häufigsten verwendeten Methoden zur Verwaltung von Tastaturereignissen ist die Verwendung eines Objekts addEventListener(). Mit dieser Methode können Sie Ereignishandler direkt im JavaScript-Code hinzufügen, wodurch die Verarbeitung jeder Taste vereinfacht und klar definiert wird.
In diesem Handbuch werden wir uns die grundlegenden Tastaturereignisse in JavaScript ansehen und Beispiele für ihre Verwendung zeigen. Wir werden untersuchen, wie Sie mit Tastatureingaben und -loslassereignissen umgehen und wie Sie mit verschiedenen Tasten, einschließlich Sondertasten und Tastenkombinationen, arbeiten können.
Drücken der Tastaturtasten in Javascript
Der erste Weg besteht darin, das Ereignis anzuwenden keydown. Dieses Ereignis tritt auf, wenn eine Taste gedrückt und gedrückt gehalten wird. Um dieses Ereignis zu verfolgen, können Sie einem Element, auf das Sie sich konzentrieren möchten, einen Handler hinzufügen. Wenn Sie beispielsweise die Tastenanschläge im gesamten Fenster überwachen möchten, können Sie einen Handler auf ein Objekt anwenden document.
Der zweite Weg ist das Ereignis keypress. Dieses Ereignis tritt nur auf, wenn Sie die Zeichentaste drücken. Ebenso wie das Ereignis keydown Sie können einem Element oder Objekt einen Handler hinzufügen document.
Endlich ein Ereignis keyup tritt auf, wenn die Taste losgelassen wird. Dieses Ereignis kann auch mit einem Ereignishandler behandelt werden.
Die oben beschriebenen Methoden ermöglichen es Ihnen, Tastatureingaben in Javascript einfach zu verfolgen und entsprechende Aktionen auszuführen. Verwenden Sie sie in Ihren Projekten, um Benutzern eine interaktive und ansprechende Erfahrung zu bieten!
Ein Leitfaden für Anfänger
Einführung
Das Drücken der Tasten auf der Tastatur ist eine der Hauptfunktionen für die Interaktion mit Webanwendungen. JavaScript bietet die Möglichkeit, mit Tastatureingaben verbundene Ereignisse zu behandeln, sodass Entwickler interaktive und ansprechende Benutzeroberflächen erstellen können.
Behandeln von Tastaturereignissen
JavaScript verwendet die Methoden addEventListener() oder onkeydown(), um Tastatureingaben zu behandeln. Mit diesen Methoden können Sie eine Ereignishandlerfunktion mit bestimmten Tastaturereignissen verknüpfen.
Beispiel für die Verarbeitung eines Tastenanschlags:
document.addEventListener('keydown', function(event) ); Eigenschaften des Tastaturereignisses
Das Tastaturereignis in JavaScript bietet verschiedene Eigenschaften, die zum Abrufen von Informationen über eine gedrückte Taste verwendet werden können. Einige dieser Eigenschaften umfassen key (enthält das Symbol der gedrückten Taste), keyCode (enthält den numerischen Code der gedrückten Taste) und shiftKey (bestimmt, ob die Umschalttaste gedrückt wurde).
Beispiel für die Verwendung von Tastaturereigniseigenschaften:
document.addEventListener('keydown', function(event) ); Arbeiten mit verschiedenen Tastaturtypen
Mit JavaScript können Sie verschiedene Arten von Tasten wie Buchstaben, Zahlen, Funktionstasten usw. behandeln. Sie können verschiedene Bedingungen innerhalb der Ereignishandlerfunktion verwenden, um den Typ einer Taste zu bestimmen.
Beispiel für die Verarbeitung verschiedener Tastenarten:
document.addEventListener('keydown', function(event) else if (event.key === 'Escape') else if (event.keyCode >= 48 && event.keyCode else >); Schlußfolgerung
Die Handhabung von Tastatureingaben in JavaScript ist eine wichtige Funktion zum Erstellen interaktiver Benutzeroberflächen. Wenn Sie die Grundlagen für Tastaturereignisse kennen, können Sie bequemere und funktionellere Webanwendungen erstellen.
Grundbegriff
Wenn Sie mit dem Tastendruck der Tastatur in JavaScript arbeiten, ist es wichtig, einige grundlegende Konzepte zu verstehen:
Keydown-Ereignis: dieses Ereignis tritt auf, wenn die Tastaturtaste gedrückt wird.
Keyup-Ereignis: dieses Ereignis tritt auf, wenn die Tastaturtaste losgelassen wird.
Tastencodes: jede Taste der Tastatur hat ihren eigenen eindeutigen Code, der sie definiert. Zum Beispiel hat die Taste "A" den Code 65 und die Taste "Enter" den Code 13.
keyCode-Eigenschaft: dies ist eine Eigenschaft des Ereignisobjekts, die den Code der gedrückten Taste enthält.
Key-Eigenschaft: dies ist eine Eigenschaft des Ereignisobjekts, die das Symbol der gedrückten Taste enthält.
Tastenmodifikatoren: dies sind Tasten, die das Verhalten anderer Tasten ändern können, z. B. Umschalt, Strg oder Alt. Sie können in Verbindung mit anderen Tasten verwendet werden, um spezielle Aktionen auszuführen.
Wenn Sie diese grundlegenden Konzepte verstehen, können Sie mit dem Tastendruck der Tastatur in JavaScript effizienter arbeiten und interaktive Webanwendungen und Spiele erstellen.
Tastaturereignisse in Javascript
Mit Tastaturereignissen in JavaScript können Sie die Aktionen eines Benutzers mit der Tastatur auf einer Webseite verfolgen. Mit diesen Ereignissen können Sie auf das Drücken bestimmter Tasten reagieren, Texteingaben verarbeiten und interaktive Funktionen erstellen.
Eines der am häufigsten verwendeten Tastaturereignisse ist das "Keydown" -Ereignis. Es wird ausgelöst, wenn der Benutzer eine Taste auf der Tastatur drückt. Das Keydown-Ereignis kann verwendet werden, um zu bestimmen, ob eine bestimmte Taste gedrückt wird und eine bestimmte Aktion als Reaktion auf dieses Ereignis ausgeführt wird.
Ein weiteres wichtiges Tastaturereignis ist das Keyup-Ereignis. Es wird ausgelöst, wenn der Benutzer eine Taste auf der Tastatur loslässt. Das "keyup" -Ereignis kann verwendet werden, um bestimmte Aktionen auszuführen, wenn die Taste losgelassen wird.
Es gibt auch ein "Keypress" -Ereignis, das ausgelöst wird, wenn eine Taste gedrückt und gedrückt gehalten wird (langes Drücken). Dieses Ereignis ist jedoch eingeschränkt und wird nur selten in modernen Webanwendungen verwendet.
Tastaturereignisse in JavaScript bieten viele Möglichkeiten für die Verarbeitung von Tasten durch den Benutzer. Sie können verwendet werden, um Spiele, interaktive Formulare, Hotkeys und andere nützliche Funktionen zu erstellen. Durch das Erlernen von Tastaturereignissen können Sie benutzerfreundliche und intuitivere Schnittstellen auf Ihrer Website erstellen.
Registrieren von Ereignissen
Sie müssen die addEventListener() -Methode verwenden, um Tastaturereignisse in JavaScript zu protokollieren. Mit dieser Methode können Sie Funktionen Ereignishandler eines bestimmten Typs zuweisen.
So registrieren Sie ein Ereignis Tastendruck auf der Tastatur müssen Sie den Ereignistyp keydown verwenden. Sie müssen den Ereignistyp keyup verwenden, um eine Aktion auszuführen, wenn Sie die Tasten loslassen.
Beispiel für die Verwendung der addEventListener() -Methode zum Protokollieren von Ereignissen:
document.addEventListener('keydown', function(event) );document.addEventListener('keyup', function(event) ); Wenn Sie im folgenden Beispiel eine beliebige Taste auf der Tastatur drücken, wird in der Konsole die Meldung "Taste gedrückt" angezeigt. Wenn Sie die Taste loslassen, wird die Meldung "Taste losgelassen" in der Konsole angezeigt.
Der Ereignishandler muss eine Funktion sein, die ausgeführt wird, wenn das Ereignis eintritt. Die Funktion kann ein event-Argument annehmen, das Ereignisinformationen enthält, z. B. den Code der gedrückten Taste.
Sie können auch Ereignisse nicht nur für das gesamte Dokument, sondern auch für einzelne Elemente protokollieren, indem Sie die addEventListener() -Methode verwenden. Um beispielsweise Ereignisse nur auf einer bestimmten Schaltfläche zu protokollieren:
var button = document.querySelector('button');button.addEventListener('keydown', function(event) ); In diesem Beispiel wird beim Drücken einer Taste auf einer Taste die Meldung "Taste gedrückt" in der Konsole angezeigt.
Zuweisen von Ereignishandlern
Mithilfe der addEventListener() -Methode wird ein Ereignishandler für einen Tastendruck zugewiesen. Diese Methode akzeptiert zwei Argumente: einen Ereignistyp und eine Handlerfunktion.
document.addEventListener('keydown', function(event) );Im obigen Beispiel weisen wir dem gesamten Dokument einen 'Keydown'-Ereignishandler zu. Wenn der Benutzer eine Taste drückt, wird eine Handlerfunktion aufgerufen, die das Ereignisobjekt als Argument übergibt.
Das Ereignisobjekt enthält Ereignisinformationen wie den Ereignistyp, den Code der gedrückten Taste und andere Eigenschaften. Wir können diese Eigenschaften verwenden, um bestimmte Aktionen abhängig von der gedrückten Taste auszuführen.
Zum Beispiel können wir den Code einer gedrückten Taste überprüfen und eine bestimmte Aktion ausführen:
document.addEventListener('keydown', function(event) >);In diesem Beispiel überprüfen wir den Code der gedrückten Taste mithilfe der keyCode-Eigenschaft des Ereignisobjekts. Wenn der Code mit dem Code der Eingabetaste (Code 13) übereinstimmt, führen wir eine bestimmte Aktion aus.
Dadurch können wir durch das Zuweisen eines Ereignishandlers zum Drücken der Tastaturtasten in JavaScript die Benutzeraktionen verfolgen und darauf reagieren, wodurch die Interaktivität von Websites erheblich verbessert wird.
Ereignisobjekt
| Eigenschaft | Die Beschreibung |
|---|---|
| type | Gibt den Ereignistyp zurück, z. B. "keydown", "keyup" usw. |
| target | Gibt das Element zurück, bei dem das Ereignis aufgetreten ist |
| keyCode | Gibt den numerischen Wert der Taste zurück, die gedrückt wurde, wobei jede Taste ihren eigenen Code hat. Beispiel: Code 13 entspricht der Eingabetaste. |
| which | Gibt ähnlich wie die keyCode-Eigenschaft den numerischen Wert einer Taste zurück. Wird normalerweise in älteren Versionen von Browsern verwendet, die die keyCode-Eigenschaft nicht unterstützen. |
Das Ereignisobjekt in JavaScript liefert Informationen über das Ereignis, das auf einer Webseite aufgetreten ist. Wenn der Benutzer eine Taste auf der Tastatur drückt, tritt ein "Keydown" - oder "Keyup" -Ereignis auf, und das Ereignisobjekt enthält Informationen über die gedrückte Taste.
Eine der am häufigsten verwendeten Eigenschaften eines Ereignisobjekts ist "keyCode" oder "which". Sie können bestimmen, welche Taste gedrückt wurde. Wenn Sie beispielsweise überprüfen möchten, ob die Eingabetaste gedrückt wurde, können Sie die Eigenschaft "keyCode" oder "which" verwenden und sie mit dem numerischen Wert der Eingabetaste vergleichen (normalerweise ist dieser Wert 13).
Die "target" -Eigenschaft des Ereignisobjekts gibt das Element zurück, an dem das Ereignis aufgetreten ist. Dies kann nützlich sein, wenn mehrere Elemente auf der Seite vorhanden sind, von denen jedes auf Tastenanschläge reagieren muss. Sie können diese Eigenschaft verwenden, um zu bestimmen, welches Element das Ereignis ausgelöst hat.
Die "type" -Eigenschaft des Ereignisobjekts gibt den Ereignistyp zurück, dh "keydown", "keyup" usw. Es kann auch nützlich sein, wenn Sie je nach Ereignistyp unterschiedliche Aktionen ausführen müssen.
Eigenschaften des Ereignisobjekts
Wenn ein Tastendruckereignis auf der Tastatur auftritt, erstellt der Browser ein Ereignisobjekt, das Informationen über das Ereignis enthält, das aufgetreten ist. Dieses Objekt verfügt über mehrere Eigenschaften, mit denen Sie Informationen zu einer gedrückten Taste abrufen können.
Einige der nützlichsten Eigenschaften eines Ereignisobjekts sind:
- event.key - Gibt den Wert einer Taste als Zeichenfolge zurück. Dies kann ein Buchstabe, eine Zahl, ein Zeichen oder eine der Sondertasten wie Enter, Escape oder Rücktaste sein.
- event.keyCode - Gibt den numerischen Code einer Taste zurück. Jede Taste auf der Tastatur hat einen eindeutigen Code.
- event.shiftKey - gibt true zurück, wenn die Umschalttaste gedrückt wird, während die Taste gedrückt wird, und andernfalls false.
- event.ctrlKey - gibt true zurück, wenn die Strg-Taste gedrückt wird, während Sie eine Taste drücken, und andernfalls false.
- event.altKey - Gibt true zurück, wenn die Alt-Taste gedrückt gehalten wird, und andernfalls false.
Mit diesen Eigenschaften können Sie viele interessante Funktionen implementieren, z. B. die Festlegung einer gedrückten Taste oder die Überprüfung, ob eine Zusatztaste (Umschalt, Strg, Alt) gedrückt wurde.
