JavaScript: Tastaturereignisse erfassen und darauf reagieren

In diesem Artikel besprechen wir, wie man verschiedene Tastaturereignisse in JavaScript abfängt und darauf reagiert. Um das Verständnis zu erleichtern, zeige ich Ihnen einige Beispiele aus der Praxis.

JavaScript ist eine der Kerntechnologien des Internets. Es wird von den meisten Websites verwendet und von allen modernen Webbrowsern unterstützt, ohne dass Plugins erforderlich sind. In dieser Serie besprechen wir verschiedene Tipps und Tricks, die Ihnen bei Ihrer täglichen JavaScript-Entwicklung helfen.

Als JavaScript-Entwickler müssen Sie manchmal Funktionen implementieren, die erfordern, dass Sie Tastaturereignisse verarbeiten und darauf basierende Aktionen ausführen. Glücklicherweise bietet JavaScript ein integriertes KeyboardEvent-Objekt, mit dem Sie verschiedene Arten von Tastaturereignissen verarbeiten können.

Tastaturereignisse in JavaScript

In JavaScript stellt das KeyboardEvent-Objekt drei Ereignisse bereit: Taste nach unten, Taste nach unten und Taste nach oben.

Wenn Sie eine beliebige Taste auf der Tastatur drücken, wird eine Reihe von Ereignissen in der folgenden Reihenfolge ausgeführt.

• Drücken Sie die Taste
• Knopf
• Knopf

Tastenereignisse werden ausgelöst, wenn eine beliebige Taste auf der Tastatur gedrückt wird. Und wenn eine Taste längere Zeit gedrückt wird, wird das Tastendruckereignis wiederholt ausgelöst.

Tastenereignisse werden hauptsächlich ausgelöst, wenn ein druckbares Zeichen gedrückt wird, und werden nach Tastenereignissen ausgelöst. Tatsächlich wird das Schlüsselereignis verwendet, um die durch das Schlüsselereignis erzeugten Zeichen weiterzuleiten. In den meisten Fällen lösen Schlüssel, die keine Zeichen sind, keine Schlüsselereignisse aus. Obwohl einige Browser dieses Ereignis unterstützen, wird es nicht empfohlen, sich auf dieses Ereignis zu verlassen, da es aus dem Webstandard entfernt wird.

Schlüsselereignisse gelten als veraltet und werden in modernen Browsern nicht mehr verwendet.

Schließlich wird das Tastenereignis ausgelöst, wenn die Taste losgelassen wird. Im Grunde ergibt die Kombination aus Tastendruck und Tastendruck-Ereignissen einen Code, der angibt, welche Taste gedrückt wurde.

Jedes Tastaturereignis stellt zwei wichtige Eigenschaften bereit: key 和 code。 key 属性用按下的字符填充，而 code 属性用字符的物理键位置填充。例如，如果按 a 字符键，则 key 属性将填充为 a，并且 code 属性将填充为 KeyAKonstant. Allerdings ist der gedrückte Tastencode nicht unbedingt mit dem Zeichen identisch! Wenn der Benutzer ein alternatives Tastaturlayout eingerichtet hat, z. B. Dvorak, werden beim Drücken desselben Tastencodes unterschiedliche Zeichen erzeugt.

Das Obige ist eine kurze Übersicht über Tastaturereignisse in JavaScript. Ab dem nächsten Abschnitt werden wir diese Ereignisse zusammen mit Beispielen aus der Praxis besprechen, um zu verstehen, wie sie funktionieren.

keydown Veranstaltungen

In diesem Abschnitt erfahren Sie, wie keydown 事件如何在 JavaScript 中工作。当按下键盘上的任意键时，会触发 keydown Ereignisse in JavaScript funktionieren. Das

-Ereignis wird ausgelöst, wenn eine beliebige Taste auf der Tastatur gedrückt wird.

Werfen wir einen kurzen Blick auf die folgenden Beispiele.

document.addEventListener('keydown', (event) => {
  var keyValue = event.key;
  var codeValue = event.code;

  console.log("keyValue: " + keyValue);
  console.log("codeValue: " + codeValue);
}, false);

keydownWie Sie sehen können, haben wir einen Listener erstellt, um auf das

-Ereignis zuzuhören. Immer wenn eine Taste gedrückt wird, wird unser Listener aufgerufen und der Wert und Code dieser Taste werden in der Konsole protokolliert. Führen Sie es einfach aus und sehen Sie, wie es funktioniert.

Sehen wir uns das folgende Beispiel an, das zeigt, wie man erkennt, ob der Benutzer Strg + A oder Strg + A

gedrückt hat.

document.addEventListener('keydown', (event) => {
  if (event.ctrlKey) {
     if (event.keyCode == 65 || event.keyCode == 97) {
         console.log("You have just pressed Ctrl + a/A!");
     }
  }
}, false);

ctrlKey 是 KeyboardEvent 对象的一个​​特殊属性，它告诉您在触发 keydown 事件时是否按下了 Ctrl 键。因此，如果 ctrlKeyZuallererst ist ctrlKey eine spezielle Eigenschaft des -Objekts, die Ihnen sagt, ob die Strg-Taste

gedrückt wurde, als das

-Ereignis ausgelöst wurde. Wenn also ctrlKey wahr ist, bedeutet dies, dass die keyCode 值，如果是 65 或 97，则表示是 a 或 A 与 Ctrl 键一起按下。 KeyboardEvent 对象的 keyCodeStrg-Taste gedrückt wurde. Als nächstes überprüfen wir den keyCode-Wert des gedrückten Zeichens. Wenn es 65 oder 97 ist, bedeutet es a oder A Drücken Sie zusammen mit der

Strg

-Taste.

Die Eigenschaft keyCode des Objekts gibt den Unicode-Zeichencode der gedrückten Taste zurück. Ebenso können Sie auch die

shiftKeykeydown 事件。因此，当用户在文本框中输入任何文本时，它会调用 allowOnlyAlphabets 函数。在 allowOnlyAlphabets 函数中，我们根据字母表的有效 Unicode 范围验证了事件对象的 keyCode 属性的值。因此，如果用户按下有效的字母字符，则 allowOnlyAlphabets 函数将返回 true，否则将返回 false-Eigenschaft des

KeyboardEvent🎜-Objekts verwenden, die Ihnen mitteilt, ob die 🎜Shift🎜-Taste während des Tastendruckereignisses gedrückt wurde. auslösen. 🎜 🎜Schauen wir uns abschließend das folgende Beispiel an, das zeigt, wie man in einem Eingabefeld eines HTML-Formulars nur Buchstaben zulässt. 🎜

<script>
function allowOnlyAlphabets(event) {
  var charCode = event.keyCode;

  if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
    return true;
  else
    return false;
}
</script>
<html>
  <body>
    <div>
        <input type="text" onkeydown="return allowOnlyAlphabets(event);">
    </div>
  </body>
</html>

🎜Im obigen Beispiel haben wir das Ereignis 🎜 im Eingabetextfeld definiert. Wenn der Benutzer also Text in das Textfeld eingibt, ruft er die Funktion allowOnlyAlphabets auf. In der Funktion allowOnlyAlphabets validieren wir den Wert der Eigenschaft keyCode des Ereignisobjekts anhand des gültigen Unicode-Alphabetbereichs. Daher gibt die Funktion allowOnlyAlphabets true zurück, wenn der Benutzer ein gültiges Alphabetzeichen drückt, andernfalls false. Das Endergebnis ist, dass der Benutzer keine anderen Zeichen als Buchstaben eingeben kann. 🎜

keyup 事件

在本节中，我们将了解 keyup 事件如何工作。事实上，它的工作原理与 keydown 事件非常相似，唯一的区别是它是在释放按键时触发，而不是在按下按键时触发。

让我们看一下下面的例子。

document.addEventListener('keydown', (event) => {
  var keyValue = event.key;
  var codeValue = event.code;

  console.log("keydown event, keyValue: " + keyValue);
  console.log("keydown event, codeValue: " + codeValue);

}, false);

document.addEventListener('keyup', (event) => {
  var keyValue = event.key;
  var codeValue = event.code;

  console.log("keyup event, keyValue: " + keyValue);
  console.log("keyup event, codeValue: " + codeValue);
}, false);

在上面的示例中，当您按下任意键时，将首先触发 keydown 事件，然后触发 keyup 事件。例如，如果您按 a 键，您应该在控制台上看到以下输出。请务必注意事件的触发顺序。

keydown event, keyValue: a
keydown event, codeValue: KeyA
keyup event, keyValue: a
keyup event, codeValue: KeyA

让我们看一下以下示例，它演示了如何在项目中使用 keyup 事件。

<script>
function getSearchResults(event, element) {
  if (element.value.length > 6) {
    var searchKeyword = element.value;
    // make an AJAX call to fetch search results for "searchKeyword"
  }
}
</script>
<html>
  <body>
    <div>
           <input type="text" onkeyup="return getSearchResults(event, this);">
    </div>
  </body>
</html>

在上面的示例中，我们在输入文本框上定义了 onkeyup 事件。因此，当用户在文本框中输入任何文本时，它都会调用 getSearchResults 函数。在 getSearchResults 函数中，我们将进行 AJAX 调用来获取搜索关键字的搜索结果。这也称为实时搜索，因为它会立即显示搜索结果，而无需刷新整个页面。

重要的 KeyboardEvent 对象属性

在最后一节中，我将总结 KeyboardEvent 对象的重要属性。事实上，我们已经在到目前为止讨论的示例中看到了一些常用的属性，例如 key 和 code。我们还将在本节中讨论一些其他重要属性。

• <strong>key</strong>：返回按下的字符。例如，如果按下a字符，则会返回 a。
• <strong>code</strong>：返回字符的物理键码。例如，如果按下a字符，则会返回 KeyA。
• <strong>keyCode</strong>：返回按下的按键的Unicode字符代码。
• <strong>ctrlKey</strong>：告诉您触发按键事件时是否按下Ctrl键。
• <strong>altKey</strong>：告诉您触发按键事件时是否按下了Alt键。
• <strong>shiftKey</strong>：告诉您触发按键事件时是否按下Shift键。
• <strong>metaKey</strong>：告诉你触发按键事件时是否按下了Meta键。在大多数情况下，Meta 键是键盘上位于 Ctrl 和 Alt 键之间的键。
• <strong>位置</strong>：返回键盘或设备上按键的位置。

如您所见，keyboardEvent 对象提供了各种属性，允许您检测不同的按键。在大多数情况下，您将使用 keydown 事件来检测按下的按键并执行相应的操作。正如我们之前讨论的，您不应该使用 keypress 事件，因为它迟早会被弃用。

结论

今天，我们讨论了如何在 JavaScript 中使用键盘事件以及几个实际示例。

Das obige ist der detaillierte Inhalt vonJavaScript: Tastaturereignisse erfassen und darauf reagieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!