JavaScript: Die Handhabung von Tastaturereignissen beherrschen

Website-Entwickler möchten, dass die Leser auf irgendeine Weise mit ihrer Website interagieren. Besucher können auf der Seite nach oben und unten scrollen, in Eingabefelder schreiben, auf einen Link klicken, um auf eine andere Seite zuzugreifen, oder Tastenkombinationen drücken, um bestimmte Aktionen auszulösen. Als Entwickler sollten Sie in der Lage sein, alle diese Ereignisse zu erfassen und dem Benutzer die erforderliche Funktionalität bereitzustellen.

In diesem Tutorial liegt unser Fokus auf der Handhabung von Tastaturereignissen in JavaScript. Wir erfahren mehr über die verschiedenen Arten von Tastaturereignissen, den Umgang mit speziellen Tastenereignissen und erhalten Informationen über gedrückte oder losgelassene Tasten.

Tastaturereignistypen

Tastaturereignisse werden in drei Typen unterteilt. Diese heißen keydown、keypress 和 keyup.

Solange eine Taste gedrückt wird, wird das keydown 事件。所有键都会被触发。它们是否产生角色价值并不重要。例如，按键盘上的 A 或 Alt 键将触发 keydown-Ereignis ausgelöst.

keypress 事件已弃用。它仅在按下产生字符值的键时触发。例如，按 A 键将触发此事件，但按 Alt 键则不会。您应该考虑使用 keydown Veranstaltung, um es zu ersetzen.

Das keyup-Ereignis wird ausgelöst, wenn die vom Benutzer gedrückte Taste losgelassen wird.

Angenommen, der Benutzer drückt kontinuierlich eine beliebige Taste auf der Tastatur. In diesem Fall wird das Ereignis keydown wiederholt ausgelöst. Sobald der Benutzer die Taste loslässt, wird das keydown 事件将被重复触发。一旦用户释放密钥，就会触发 keyup-Ereignis ausgelöst.

Tastaturereignisse anhören

An dieser Stelle möchte ich etwas ziemlich Offensichtliches erwähnen. Eine Tastatur ist ein Eingabegerät, mit dem der Benutzer Eingaben erhält. Auf der Grundlage dieses Inputs ergreifen wir Maßnahmen. Es gibt jedoch auch andere Möglichkeiten für Benutzer, Eingaben zu senden.

Wenn Sie alle Eingabefelder verfolgen möchten, die der Benutzer in einem Formular ausfüllt, ist es sinnvoller, andere Ereignisse für diese Eingaben zu verwenden (z. B. change).

Außerdem werden Tastaturereignisse nur für Elemente generiert, die den Fokus erhalten können. Dazu gehören auch andere Elemente mit dem <input> 元素、<textarea></textarea> 元素、<summary></summary> 元素以及具有 contentEditable 或 tabindex-Attribut.

Zum Beispiel können Sie nicht auf Tastaturereignisse für Absatzelemente hören, es sei denn, Sie legen die Attribute tabindex oder contentEditable fest. Es wird jedoch irgendwann im DOM-Baum auftauchen, sodass Sie dem Dokument immer noch einen keydown- oder tabindex 或 contentEditable 属性，否则您将无法侦听段落元素上的键盘事件。但是，它最终会在 DOM 树中冒泡，因此您仍然可以将 keydown 或 keyup-Ereignis-Listener hinzufügen können.

Hier ist ein Beispiel:

document.addEventListener("keydown", keyIsDown);

function keyIsDown(event) {
    // Do whatever you want!
}

Sie können Rückrufe auch als Pfeilfunktionen bereitstellen:

document.addEventListener("keydown", (event) => {
    // Do whatever you want!
});

Erhalten Sie Informationen von Tastaturereignissen

Im grundlegenden Codeausschnitt aus dem vorherigen Abschnitt haben wir eine Rückruffunktion definiert. Diese Funktion akzeptiert ein event-Objekt als Argument. Dieses event-Objekt enthält alle Informationen, auf die Sie im Zusammenhang mit einem keydown- oder event 对象作为其参数。此 event 对象包含您可能需要访问的与 keydown 或 keyup-Ereignis zugreifen müssen.

Hier sind einige nützliche Eigenschaften, die Sie kennen sollten:

1. key: Diese Eigenschaft gibt eine Zeichenfolge zurück, die den Zeichenwert der gedrückten Taste darstellt.
2. code: Diese Eigenschaft gibt eine Zeichenfolge zurück, die den Code der gedrückten physischen Taste darstellt.
3. repeatrepeat：如果长时间按住某个键，该属性将返回布尔值 true，导致 keydown: Wenn eine Taste lange gedrückt wird, gibt diese Eigenschaft einen booleschen Wert true zurück, wodurch das Ereignis keydown ausgelöst wird mehrfach ausgelöst.
4. altKeyaltKey：如果用户按下 Alt 键（在 Windows 上）或 Option 键（在在 macOS 上）当 keydown: Wenn der Benutzer die
Alt
5. -Taste (unter Windows) oder die OptionctrlKey：如果用户在 keydown 事件触发时按下 Control 键，则此属性返回布尔值 true-Taste (unter macOS) drückt, wenn das keydown-Ereignis ausgelöst wird.
6. ctrlKeymetaKey：如果用户在 keydown 事件触发时按下 Meta 键，则此属性返回布尔值 true: Wenn der Benutzer die
Strg-Taste
7. drückt, wenn das keydown-Ereignis ausgelöst wird, gibt diese Eigenschaft einen booleschen Wert true zurück. shiftKey：如果用户在 keydown 事件触发时按下 Shift 键，则此属性返回布尔值 true
metaKey

: Wenn der Benutzer die

Metakeydown 事件被触发时”部分。这意味着，如果在执行上述任一操作时按下 A 或 3 等键，这些属性的值将为 true ，用于 keydown-Taste drückt, wenn das keydown-Ereignis ausgelöst wird, gibt diese Eigenschaft einen booleschen Wert true zurück.

shiftKey🎜: Diese Eigenschaft gibt einen booleschen Wert true zurück, wenn der Benutzer die 🎜Shift🎜-Taste drückt, wenn das keydown-Ereignis ausgelöst wird. 🎜 🎜 🎜Sie werden feststellen, dass ich den Teil „Wenn das keydown-Ereignis ausgelöst wird“ in alle letzten vier Eigenschaftsbeschreibungen eingefügt habe. Das bedeutet, dass, wenn eine Taste wie 🎜A🎜 oder 🎜3🎜 gedrückt wird, während eine der oben genannten Aktionen ausgeführt wird, der Wert dieser Eigenschaften für keydown true ist Ereignis . Die Taste wird ebenfalls gedrückt. 🎜 🎜Nachdem Sie sich auf die CodePen-Demo unten konzentriert haben, versuchen Sie, einzelne Tasten oder Tastenkombinationen zu drücken, um zu sehen, wie sich die Werte verschiedener Eigenschaften ändern. 🎜

如果您按键盘顶部的 3 键而不按 Shift 键，则 key 属性的值将变为 3 > 并且 code 属性的值变为 Digit3。但是，按下 Shift 后，key 属性的值将变为 #，而 code 属性仍为 Digit3。

您可以尝试使用其他组合键进行相同的操作，您会注意到 key 属性的值会根据您按下的键而变化。但是，code 属性的值保持不变。

键盘上的某些键通常是重复的。例如，有两个 Shift 键。按左键会将 code 的值设置为 ShiftLeft。按右边会将 code 的值设置为 ShiftRight。同样，有两组数字键。字母上方的代码将为您提供 Digit<Number> 代码，而数字键盘上的代码将为您提供 Numpad<Number> 代码。

这意味着，如果您的代码依赖于检测特定键，则务必确保您使用 code 属性来检查按下了哪个键。

我想提的另一件重要的事情是，并不是每个人都使用 QWERTY 键盘，而且他们的键盘甚至可能不是英文的。在这种情况下，使用 key 属性来检查按下了哪个键很容易出错。

响应键盘事件

现在我们知道了如何监听键盘事件并从中提取信息，我们可以编写一些代码来对某些特定键的 keydown 和 keyup 事件做出反应。考虑以下代码片段：

const circle = document.querySelector(".circle");

document.addEventListener("keydown", (event) => {
    
  if (event.code == "KeyR" && event.repeat != true) {
    let rVal = Math.floor(200 + Math.random() * 200);
    circle.setAttribute("style", `width: ${rVal}px; height: ${rVal}px;`);
  }

  if (event.key == "B" && event.shiftKey == true) {
    let rVal = Math.floor(10 + Math.random() * 40);
    circle.setAttribute("style", `border: ${rVal}px solid orangered;`);
  }

  if (event.code == "ArrowUp" && event.repeat != true) {
    circle.classList.add("animate__animated", "animate__bounce");
  }
});

document.addEventListener("keyup", (event) => {
  if (event.code == "ArrowUp") {
    setTimeout(() => {
      circle.classList.remove("animate__animated", "animate__bounce");
    }, 4000);
  }
});

我们为 keydown 事件创建了一个侦听器，并为 keyup 事件创建了另一个侦听器。这两个事件都附加到 document。

在 keydown 内，我们检查三个不同的密钥。我使用了 R 键的 event.code 属性来向您展示您可以单独按 R 键或与任何修饰键组合使用，并且它仍会将圆的半径更改为随机值。另一方面，我们使用 event.key 属性来检查其值是否为 B。仅当您同时按 Shift 和 B 时，此块中的代码才会执行​​，因为这种组合会导致 event.key 属性成为大写“B”。

在 keyup 内，我们检查 ArrowUp 键上的 keyup 事件。一旦钥匙被解除，我们会在四秒的延迟后删除之前附加的类。

以下 CodePen 演示展示了这一切的实际效果：

您应该尝试在上述代码中添加自己的逻辑，以便当用户按下A、S、W键时圆圈会移动> 和D。

最终想法

在本教程中，我们学习了 JavaScript 中键盘事件的基础知识。按下并释放键盘上的按键将分别触发 keydown 和 keyup 事件。与这些事件关联的 event 对象包含您确定按下了哪个键并采取适当操作所需的所有信息。

请记住，键盘只是众多可能的输入设备之一。因此，使用键盘检测任何输入可能并不总是能达到预期效果。在这种情况下，您应该考虑使用与输入相关的事件。

Das obige ist der detaillierte Inhalt vonJavaScript: Die Handhabung von Tastaturereignissen beherrschen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!