Element: keypress Event

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Event-Handler-Eigenschaft.

addEventListener("keypress", (event) => { })

onkeypress = (event) => { }

Ein KeyboardEvent. Erbt von UIEvent und Event.

Diese Schnittstelle erbt auch Eigenschaften ihrer Eltern, UIEvent und Event.

KeyboardEvent.altKey Schreibgeschützt

Gibt einen booleschen Wert zurück, der true ist, wenn die Alt-Taste (Option oder ⌥ auf macOS) aktiv war, als das Tastaturereignis erzeugt wurde.

KeyboardEvent.code Schreibgeschützt

Gibt einen String mit dem Code-Wert der physischen Taste zurück, die durch das Ereignis dargestellt wird.

KeyboardEvent.ctrlKey Schreibgeschützt

Gibt einen booleschen Wert zurück, der true ist, wenn die Ctrl-Taste aktiv war, als das Tastaturereignis erzeugt wurde.

KeyboardEvent.isComposing Schreibgeschützt

Gibt einen booleschen Wert zurück, der true ist, wenn das Ereignis zwischen compositionstart und compositionend ausgelöst wird.

KeyboardEvent.key Schreibgeschützt

Gibt einen String zurück, der den Tastenwert der Taste darstellt, die durch das Ereignis dargestellt wird.

KeyboardEvent.location Schreibgeschützt

Gibt eine Zahl zurück, die den Ort der Taste auf der Tastatur oder einem anderen Eingabegerät darstellt. Eine Liste der Konstanten, die die Positionen identifizieren, wird in Tastaturpositionen angezeigt.

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 Tastaturereignis erzeugt wurde.

KeyboardEvent.repeat Schreibgeschützt

Gibt einen booleschen Wert zurück, der true ist, wenn die Taste gehalten wird, sodass 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 Tastaturereignis erzeugt wurde.

Dieses Beispiel protokolliert den Wert von KeyboardEvent.code, wann immer Sie eine Taste drücken, nachdem Sie das <input>-Element fokussiert haben.

Um zu sehen, welche Tasten ein keypress-Ereignis auslösen, und welche Tasten dies nicht tun, versuchen Sie, die folgenden zu drücken:

• Buchstabentasten, Zahlentasten und Interpunktionstasten
• Symboltasten wie die $-, +-, =-, %- und +-Tasten
• Modifikatortasten wie die Alt-, Shift-, Ctrl-, Meta-, Esc-, Option- oder ⌘-Tasten
• die Enter-Taste
• die Enter-Taste in Kombination mit den Shift- oder Ctrl-Tasten
• die Enter-Taste in Kombination mit anderen Modifikatortasten als den Shift- oder Ctrl-Tasten

<div>
  <label for="sample">Focus the input and type something:</label>
  <input type="text" name="text" id="sample" />
</div>
<p id="log"></p>

const log = document.getElementById("log");
const input = document.querySelector("input");

input.addEventListener("keypress", logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}

• Das Document-Interface, auf das das Ereignis ebenfalls abzielt.

• Verwandte Ereignisse:

  • input
  • keydown
  • keyup