KeyboardEvent

Die schreibgeschützte Eigenschaft der KeyboardEvent-Oberfläche gibt den Wert der vom Benutzer gedrückten Taste zurück, wobei der Zustand von Modifikatortasten wie Shift sowie das Tastaturlocale und Layout berücksichtigt werden. Sein Wert wird wie folgt bestimmt:
Schlüsselwerte
Eine vollständige Liste der wichtigsten Werte finden Sie hier. Die tastatur druck taste auf der Tastatur einfach finden.
Wenn die gedrückte Taste eine gedruckte Darstellung hat, ist der zurückgegebene Wert eine nicht leere Unicode-Zeichenkette, die die druckbare Darstellung der Taste enthält.
Windows tastatur
Wenn die gedrückte Taste ein Steuer- oder Sonderzeichen ist, ist der zurückgegebene Wert einer der vordefinierten Schlüsselwerte.
Wenn das KeyboardEvent den Druck einer toten Taste darstellt, muss der Schlüsselwert „Tot“ sein.
Einige spezielle Tastaturtasten (wie die erweiterten Tasten zur Steuerung von Medien auf Multimedia-Tastaturen) erzeugen unter Windows keine Tastencodes, sondern lösen WM_APPCOMMAND-Ereignisse aus. Diese Ereignisse werden auf DOM-Tastaturereignisse abgebildet und unter den „Virtual Key Codes“ für Windows aufgeführt, obwohl es sich nicht um Tastencodes handelt.
Wenn der Schlüssel nicht identifiziert werden kann, ist der zurückgegebene Wert „Unidentified“.

TastaturEreignisfolge

Abschnitt
Jedes KeyboardEvent wird in einer vorgegebenen Reihenfolge ausgelöst. Bei einem bestimmten Tastendruck ist die Reihenfolge der abgefeuerten KeyboardEvents wie folgt, vorausgesetzt, dass Event.preventDefault nicht aufgerufen wird:
Ein Keydown-Ereignis wird zuerst ausgelöst. Wenn die Taste weiter gedrückt gehalten wird und die Taste eine Zeichenfolge erzeugt, wird das Ereignis weiterhin in einem plattformimplementierungsabhängigen Intervall ausgegeben und die Eigenschaft KeyboardEvent.repeat read only wird auf true gesetzt.
Wenn der Schlüssel einen Zeichenschlüssel erzeugt, der dazu führen würde, dass ein Zeichen in möglicherweise ein <input>, <textarea> oder ein Element mit HTMLElement.contentEditable auf true gesetzt wird, werden die Ereignistypen beforeput und input in dieser Reihenfolge ausgelöst. Beachten Sie, dass einige andere Implementierungen, falls unterstützt, ein Tastendruckereignis auslösen können. Die Ereignisse werden wiederholt ausgelöst, während die Taste gedrückt gehalten wird.
Ein Keyup-Ereignis wird ausgelöst, sobald die Taste losgelassen wird. Damit ist der Prozess abgeschlossen.
In den Sequenzen 1 & 3 ist das KeyboardEvent.key-Attribut definiert und wird entsprechend einem Wert nach den definierten Regeln ealier gesetzt.

Beispiel für eine KeyboardEvent-Sequenz

Abschnitt
  • Betrachten Sie die Ereignissequenz, die erzeugt wird, wenn wir mit der Umschalttaste und der 2-Taste über ein US-Tastaturlayout interagieren, im Vergleich zu derjenigen, die ein britisches Tastaturlayout verwenden.
  • Versuchen Sie, mit den folgenden beiden Testfällen zu experimentieren:
  • Halten Sie die Shift-Taste gedrückt, drücken Sie dann 2 und lassen Sie sie los. Lassen Sie anschließend die Umschalttaste los.
  • Halten Sie die Shift-Taste gedrückt und drücken Sie dann 2. Lassen Sie die Umschalttaste los. Abschließend erfolgt die Freigabe 2.

HTML
Abschnitt
<div class=“fx“>
<div>
<textarea rows=“5″ name=“test-target“ id=“test-target“></textarea>
<button type=“button“ name=“btn-clear-console“ id=“btn-clear-console“>clear console</button>
</div>
<div class=“flex“>
<pre id=“console-log“></div>
</div>
</div>

CSS
Abschnitt
.fx {
-Webkit-Anzeige: flex;
Anzeige: flex;
Rand links: -20px;
margin-rechts: -20px;
}
.fx > div { div {
Polsterung links: 20px;
Polsterung – rechts: 20px;
}
.fx > div:first-child {
Breite: 30%;
}
.flex {
-webkit-flex: 1;
Flex: 1;
}
#test-target {
anzeige: block;
Breite: 100%;
Rand unten: 10px;
}
JavaScript
Abschnitt
let textarea = document.getElementById(‚test target‘),
consoleLog = document.getElementById(‚console-log‘),
btnClearConsole = document.getElementById(‚btn-clear-console‘);
Funktion logMessage(message) {
document.getElementById(„console-log“).innerHTML += Nachricht + „<br>“;
}
textarea.addEventListener(‚keydown‘, (e) => {
wenn (!e.repeat)
logMessage(`Taste „${e.key}““ pressed [event: keydown]`);
sonst
logMessage(`Key „${e.key}““ wiederholt [event: keydown]`);
});
textarea.addEventListener(‚vor der Ausgabe‘, (e) => {
logMessage(`Key „${e.data}““ wird gerade eingegeben[event: beforeput]`);
});
textarea.addEventListener(‚input‘, (e) => {
logMessage(`Key „${e.data}““ input [event: input]`);
});
textarea.addEventListener(‚keyup‘, (e) => {
logMessage(`Key „${e.key}““ freigegeben [event: keyup]`);
});
btnClearConsole.addEventListener(‚click‘, (e) => {
Kind lassen = consoleLog.firstChild;
während (Kind) {
consoleLog.removeChild(child);
Kind = consoleLog.firstChild;
}
});
Ergebnis
Abschnitt
Öffnen in CodePen
Öffnen in JSFiddle
Hinweis: Bei Browsern, die die InputEvent-Oberfläche, die für die Before- und Input-Ereignisse verwendet wird, nicht vollständig implementieren, kann es zu einer fehlerhaften Ausgabe in den Zeilen der Protokollausgabe kommen.

Fall 1

Abschnitt
Wenn die Shift-Taste gedrückt wird, wird zuerst ein Keydown-Ereignis ausgelöst, und der Wert der Key-Eigenschaft wird auf die Zeichenkette „Shift“ gesetzt. Wenn wir diese Taste gedrückt halten, wird das Keydown-Ereignis nicht mehr wiederholt ausgelöst, da es keinen Zeichenschlüssel erzeugt.
Wenn Taste 2 gedrückt wird, wird für diesen neuen Tastendruck ein weiteres Keydown-Ereignis ausgelöst, und der Key-Eigenschaftswert für das Ereignis wird aufgrund der aktiven Modifikator-Shift-Taste auf die Zeichenkette „@“ für den US-Tastaturtyp und „““ für den UK-Tastaturtyp gesetzt. Die Vor- und Eingabe-Ereignisse werden als nächstes ausgelöst, da ein Zeichenschlüssel erzeugt wurde.
Wenn wir die Taste 2 loslassen, wird ein Keyup-Ereignis ausgelöst und die Key-Eigenschaft behält die Zeichenkettenwerte „@“ und „““ für die verschiedenen Tastaturlayouts bei.
Als wir schließlich die Shift-Taste loslassen, wird ein weiteres Keyup-Ereignis ausgelöst, und die Taste
Attributwert bleibt „Shift“.

Fall 2

Abschnitt
Wenn die Shift-Taste gedrückt wird, wird zuerst ein Keydown-Ereignis ausgelöst, und der Wert der Key-Eigenschaft wird auf die Zeichenkette „Shift“ gesetzt. Während wir diese Taste gedrückt halten, wird das Keydown-Ereignis nicht mehr wiederholt ausgelöst, da es keinen Zeichenschlüssel erzeugt hat.
Wenn Taste 2 gedrückt wird, wird für diesen neuen Tastendruck ein weiteres Keydown-Ereignis ausgelöst, und der Key-Eigenschaftswert für das Ereignis wird aufgrund der aktiven Modifikator-Shift-Taste auf die Zeichenkette „@“ für den US-Tastaturtyp und „““ für den UK-Tastaturtyp gesetzt. Die Vor- und Eingabe-Ereignisse werden als nächstes ausgelöst, da ein Zeichenschlüssel erzeugt wurde. Während wir die Taste gedrückt halten, wird das Keydown-Ereignis wiederholt ausgelöst und die Eigenschaft KeyboardEvent.repeat auf true gesetzt. Die Vor- und Eingabe-Ereignisse werden ebenfalls wiederholt ausgelöst.
Wenn wir die Shift-Taste loslassen, wird ein Keyup-Ereignis ausgelöst, und der Wert des Key-Attributs bleibt „Shift“. An dieser Stelle ist zu beachten, dass der Key Property Value für das sich wiederholende Keydown-Ereignis der Taste 2 nun „2“ ist, da die Modifikator-Shift-Taste nicht mehr aktiv ist. Das Gleiche gilt für die Eigenschaft InputEvent.data der Before- und Input-Ereignisse.
Wenn wir schließlich die Taste 2 loslassen, wird ein Keyup-Ereignis ausgelöst, aber die Key-Eigenschaft wird für beide Tastaturlayouts auf den Zeichenkettenwert „2“ gesetzt, da die Modifikator-Shift-Taste nicht mehr aktiv ist.

Beispiel

Abschnitt
In diesem Beispiel wird EventTarget.addEventListener() verwendet, um auf Keydown-Ereignisse zu warten. Wenn sie auftreten, wird der Wert des Schlüssels überprüft, um zu sehen, ob es sich um einen der Schlüssel handelt, an denen der Code interessiert ist, und wenn er es ist, wird er in irgendeiner Weise verarbeitet (möglicherweise durch Steuern eines Raumschiffs, vielleicht durch Ändern der ausgewählten Zelle in einer Kalkulationstabelle).