KeyboardEvent
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
* Some parts of this feature may have varying levels of support.
KeyboardEvent
Objekte beschreiben eine Benutzerinteraktion mit der Tastatur; jedes Ereignis beschreibt eine einzelne Interaktion zwischen dem Benutzer und einer Taste (oder einer Kombination einer Taste mit Modifikatortasten) auf der Tastatur. Der Ereignistyp (keydown
, keypress
oder keyup
) identifiziert, welche Art von Tastaturaktivität aufgetreten ist.
Hinweis:
KeyboardEvent
-Ereignisse geben nur an, welche Interaktion der Benutzer auf niedriger Ebene mit einer Taste auf der Tastatur hatte, ohne dieser Interaktion eine kontextuelle Bedeutung zu verleihen. Wenn Sie mit der Eingabe von Text umgehen müssen, verwenden Sie stattdessen das input
Ereignis. Tastaturereignisse werden möglicherweise nicht ausgelöst, wenn der Benutzer alternative Mittel zur Texteingabe verwendet, wie beispielsweise ein Handschriftsystem auf einem Tablet oder Grafiktablet.
Konstruktor
KeyboardEvent()
-
Erstellt ein neues
KeyboardEvent
-Objekt.
Konstanten
Das KeyboardEvent
-Interface definiert die folgenden Konstanten.
Tastaturpositionen
Die folgenden Konstanten identifizieren, aus welchem Teil der Tastatur das Tastenereignis stammt. Sie werden als KeyboardEvent.DOM_KEY_LOCATION_STANDARD
usw. aufgerufen.
Konstante | Wert | Beschreibung |
---|---|---|
DOM_KEY_LOCATION_STANDARD |
0x00 |
Die durch das Ereignis beschriebene Taste wird nicht als an einem bestimmten Bereich der Tastatur befindlich identifiziert; sie befindet sich nicht auf dem numerischen Tastenfeld (es sei denn, es handelt sich um die NumLock-Taste), und für Tasten, die sowohl auf der linken als auch auf der rechten Seite der Tastatur vorhanden sind, ist die Taste aus irgendeinem Grund nicht mit dieser Position zu assoziieren. Beispiele sind alphanumerische Tasten auf der Standard-PC-101-US-Tastatur, die NumLock-Taste und die Leertaste. |
DOM_KEY_LOCATION_LEFT |
0x01 |
Die Taste ist eine, die möglicherweise an mehreren Stellen auf der Tastatur vorhanden ist und sich in diesem Fall auf der linken Seite der Tastatur befindet. Beispiele sind die linke Steuerungstaste, die linke Befehlstaste auf einer Macintosh-Tastatur oder die linke Umschalttaste. |
DOM_KEY_LOCATION_RIGHT |
0x02 |
Die Taste ist eine, die möglicherweise an mehreren Positionen auf der Tastatur vorhanden ist und sich in diesem Fall auf der rechten Seite der Tastatur befindet. Beispiele sind die rechte Umschalttaste und die rechte Alt-Taste (Option auf einer Mac-Tastatur). |
DOM_KEY_LOCATION_NUMPAD |
0x03 |
Die Taste befindet sich auf dem numerischen Tastenfeld oder ist eine virtuelle Taste, die mit dem numerischen Tastenfeld assoziiert ist, wenn es mehr als eine Stelle gibt, von der die Taste stammen könnte. Die NumLock-Taste gehört nicht zu dieser Gruppe und ist immer mit der Position Beispiele sind die Ziffern auf dem numerischen Tastenfeld, die Eingabetaste des Tastenfeldes und der Dezimalpunkt auf dem Tastenfeld. |
Instanz-Eigenschaften
Dieses Interface erbt auch Eigenschaften seiner Eltern, UIEvent
und Event
.
KeyboardEvent.altKey
Schreibgeschützt-
Gibt einen Booleschen Wert zurück, der
true
ist, wenn die Alt (Option oder ⌥ auf macOS) Taste aktiv war, als das Tastenereignis generiert wurde. KeyboardEvent.code
Schreibgeschützt-
Gibt einen String mit dem Codewert der physikalischen Taste zurück, die durch das Ereignis dargestellt wird.
Warnung: Dies ignoriert das Tastaturlayout des Benutzers, so dass, wenn der Benutzer die Taste an der Position "Y" in einem QWERTY-Tastaturlayout drückt (nahe der Mitte der Zeile über der Home-Reihe), dies immer "KeyY" zurückgibt, selbst wenn der Benutzer eine QWERTZ-Tastatur hat (was bedeuten würde, dass der Benutzer ein "Z" erwartet und alle anderen Eigenschaften ein "Z" anzeigen würden) oder ein Dvorak-Tastaturlayout (wobei der Benutzer ein "F" erwartet). Wenn Sie dem Benutzer die korrekten Tastenanschläge anzeigen möchten, können Sie
Keyboard.getLayoutMap()
verwenden. KeyboardEvent.ctrlKey
Schreibgeschützt-
Gibt einen Booleschen Wert zurück, der
true
ist, wenn die Ctrl Taste aktiv war, als das Tastenereignis generiert wurde. KeyboardEvent.isComposing
Schreibgeschützt-
Gibt einen Booleschen Wert zurück, der
true
ist, wenn das Ereignis zwischencompositionstart
undcompositionend
ausgelöst wird. KeyboardEvent.key
Schreibgeschützt-
Gibt einen String zurück, der den Tastenwert der durch das Ereignis dargestellten Taste repräsentiert.
KeyboardEvent.location
Schreibgeschützt-
Gibt eine Zahl zurück, die die Position der Taste auf der Tastatur oder einem anderen Eingabegerät darstellt. Eine Liste der Konstanten, die die Positionen identifizieren, ist oben unter Tastaturpositionen aufgeführt.
KeyboardEvent.metaKey
Schreibgeschützt-
Gibt einen Booleschen Wert zurück, der
true
ist, wenn die Meta Taste (auf Mac-Tastaturen, die ⌘ Command Taste; auf Windows-Tastaturen, die Windows-Taste (⊞)) aktiv war, als das Tastenereignis generiert wurde. KeyboardEvent.repeat
Schreibgeschützt-
Gibt einen Booleschen Wert zurück, der
true
ist, wenn die Taste so gehalten wird, dass sie automatisch wiederholt wird. KeyboardEvent.shiftKey
Schreibgeschützt-
Gibt einen Booleschen Wert zurück, der
true
ist, wenn die Shift Taste aktiv war, als das Tastenereignis generiert wurde.
Veraltete Eigenschaften
KeyboardEvent.charCode
Veraltet Schreibgeschützt-
Gibt eine Zahl zurück, die die Unicode-Referenznummer der Taste darstellt; diese Eigenschaft wird nur vom
keypress
Ereignis verwendet. Für Tasten, derenchar
-Eigenschaft mehrere Zeichen enthält, ist dies der Unicode-Wert des ersten Zeichens in dieser Eigenschaft. In Firefox 26 gibt dies Codes für druckbare Zeichen zurück. KeyboardEvent.keyCode
Veraltet Schreibgeschützt-
Gibt eine Zahl zurück, die einen system- und implementierungsabhängigen numerischen Code darstellt, der den unmodifizierten Wert der gedrückten Taste identifiziert.
KeyboardEvent.keyIdentifier
Nicht standardisiert Veraltet Schreibgeschützt-
Diese Eigenschaft ist nicht standardisiert und wurde zugunsten von
KeyboardEvent.key
veraltet. Sie war Teil einer alten Version von DOM Level 3 Events.
Instanz-Methoden
Dieses Interface erbt auch Methoden seiner Eltern, UIEvent
und Event
.
KeyboardEvent.getModifierState()
-
Gibt einen Booleschen Wert zurück, der anzeigt, ob eine Modifikator-Taste wie Alt, Shift, Ctrl oder Meta gedrückt war, als das Ereignis erstellt wurde.
Veraltete Methoden
KeyboardEvent.initKeyboardEvent()
Veraltet-
Initialisiert ein
KeyboardEvent
-Objekt. Dies ist jetzt veraltet. Stattdessen sollte derKeyboardEvent()
Konstruktor verwendet werden.
Ereignisse
Die folgenden Ereignisse basieren auf dem KeyboardEvent
Typ. In der untenstehenden Liste verlinkt jedes Ereignis auf die Dokumentation für den Element
-Handler für das Ereignis, der generell für alle Empfänger gilt, einschließlich Element
, Document
und Window
.
Veraltete Ereignisse
keypress
Veraltet-
Eine Taste, die normalerweise einen Zeichenwert erzeugt, wurde gedrückt. Dieses Ereignis war stark geräteabhängig und ist veraltet. Sie sollten es nicht verwenden.
Nutzungshinweise
Es gibt drei Arten von Tastaturereignissen: keydown
, keypress
und keyup
. Für die meisten Tasten löst Gecko eine Sequenz von Tastenereignissen wie folgt aus:
- Wenn die Taste zunächst gedrückt wird, wird das
keydown
-Ereignis gesendet. - Wenn die Taste keine Modifikatortaste ist, wird das
keypress
-Ereignis gesendet. - Wenn der Benutzer die Taste loslässt, wird das
keyup
-Ereignis gesendet.
Sonderfälle
Einige Tasten schalten den Status einer Anzeigelampe um; dazu gehören Tasten wie Feststelltaste, NumLock und ScrollLock. Unter Windows und Linux lösen diese Tasten nur die keydown
- und keyup
-Ereignisse aus.
Hinweis:
Unter Linux löste Firefox 12 und früher auch das keypress
-Ereignis für diese Tasten aus.
Ein Modellbeschränkung des macOS-Ereignismodells führt jedoch dazu, dass Caps Lock nur das keydown
-Ereignis auslöst. NumLock wurde auf einigen älteren Laptop-Modellen (Modelle von 2007 und älter) unterstützt, aber seitdem hat macOS den NumLock auch auf externen Tastaturen nicht mehr unterstützt. Auf älteren MacBooks mit einer NumLock-Taste generiert diese Taste keine Tastenereignisse. Gecko unterstützt die ScrollLock-Taste, wenn eine externe Tastatur mit einer F14-Taste angeschlossen ist. In bestimmten älteren Versionen von Firefox generierte diese Taste ein keypress
-Ereignis; dieses inkonsistente Verhalten war Firefox-Bug 602812.
Umgang mit automatischer Wiederholung
Wenn eine Taste gedrückt gehalten wird, beginnt sie, sich automatisch zu wiederholen. Dies führt zu einer Sequenz von Ereignissen wie der folgenden:
keydown
keypress
keydown
keypress
- <<wiederholt sich, bis der Benutzer die Taste loslässt>>
keyup
Dies ist, was die DOM Level 3-Spezifikation besagt, dass passieren sollte. Es gibt jedoch einige Vorbehalte, wie unten beschrieben.
Automatische Wiederholung in einigen GTK-Umgebungen wie Ubuntu 9.4
In einigen auf GTK basierenden Umgebungen löst die automatische Wiederholung während der automatischen Wiederholung ein natives Tastenausgabeereignis automatisch aus, und es gibt keine Möglichkeit für Gecko, den Unterschied zwischen einer wiederholt gedrückten Tastenfolge und einer automatischen Wiederholung zu erkennen. Auf diesen Plattformen generiert dann eine automatisch wiederholte Taste die folgende Ereignissequenz:
keydown
keypress
keyup
keydown
keypress
keyup
- <<wiederholt sich, bis der Benutzer die Taste loslässt>>
keyup
In diesen Umgebungen gibt es leider keine Möglichkeit, dass Webinhalte den Unterschied zwischen automatisch wiederholten Tasten und Tasten, die nur wiederholt gedrückt werden, erkennen können.
Beispiel
document.addEventListener("keydown", (event) => {
const keyName = event.key;
if (keyName === "Control") {
// do not alert when only Control key is pressed.
return;
}
if (event.ctrlKey) {
// Even though event.key is not 'Control' (e.g., 'a' is pressed),
// event.ctrlKey may be true if Ctrl key is pressed at the same time.
alert(`Combination of ctrlKey + ${keyName}`);
} else {
alert(`Key pressed ${keyName}`);
}
});
document.addEventListener("keyup", (event) => {
const keyName = event.key;
// As the user releases the Ctrl key, the key is no longer active,
// so event.ctrlKey is false.
if (keyName === "Control") {
alert("Control key was released");
}
});
Spezifikationen
Specification |
---|
UI Events> # interface-keyboardevent> |
Die Spezifikation des KeyboardEvent
-Interfaces durchlief zahlreiche Entwurfsversionen, zuerst unter DOM Events Level 2, wo es fallen gelassen wurde, da kein Konsens erzielt wurde, dann unter DOM Events Level 3. Dies führte zur Implementierung nicht standardisierter Initialisierungsmethoden, der frühen DOM Events Level 2-Version KeyboardEvent.initKeyEvent()
durch Gecko-Browser und der frühen DOM Events Level 3-Version KeyboardEvent.initKeyboardEvent()
durch andere. Beide wurden durch die moderne Verwendung eines Konstruktors ersetzt: KeyboardEvent()
.
Browser-Kompatibilität
Loading…
Kompatibilitätsnotizen
- Ab Firefox 65 wird das
keypress
-Ereignis nicht mehr für nicht druckbare Tasten ausgelöst (Firefox-Bug 968056), außer für die Enter-Taste und die Shift + Enter- und Ctrl + Enter-Tastenkombinationen (diese wurden aus Gründen der Browser-Kompatibilität beibehalten).