Table des matières
Types d'événements de clavier
Écoutez les événements du clavier
Obtenir des informations sur les événements du clavier
响应键盘事件
最终想法
Maison Tutoriel CMS WordPresse JavaScript : maîtriser la gestion des événements du clavier

JavaScript : maîtriser la gestion des événements du clavier

Sep 04, 2023 am 11:29 AM

JavaScript : maîtriser la gestion des événements du clavier

Les développeurs de sites Web souhaitent que les lecteurs interagissent avec leur site Web d'une manière ou d'une autre. Les visiteurs peuvent faire défiler la page de haut en bas, écrire dans les champs de saisie, cliquer sur un lien pour accéder à une autre page ou appuyer sur des combinaisons de touches pour déclencher des actions spécifiques. En tant que développeur, vous devez être capable de capturer tous ces événements et de fournir les fonctionnalités requises à l'utilisateur.

Dans ce tutoriel, nous nous concentrerons sur la gestion des événements de clavier en JavaScript. Nous découvrirons les différents types d'événements de clavier, la gestion des événements de touches spéciaux et l'obtention d'informations sur les touches enfoncées ou relâchées.

Types d'événements de clavier

Les événements de clavier sont divisés en trois types. Ceux-ci s'appellent keydownkeypresskeyup.

Tant qu'une touche est enfoncée, l'événement keydown 事件。所有键都会被触发。它们是否产生角色价值并不重要。例如,按键盘上的 AAlt 键将触发 keydown sera déclenché.

keypress 事件已弃用。它仅在按下产生字符值的键时触发。例如,按 A 键将触发此事件,但按 Alt 键则不会。您应该考虑使用 keydownévénement pour le remplacer.

L'événement keyup sera déclenché lorsque la touche enfoncée par l'utilisateur sera relâchée.

Supposons que l'utilisateur appuie en continu sur n'importe quelle touche du clavier. Dans ce cas, l'événement keydown sera déclenché à plusieurs reprises. Une fois que l'utilisateur relâche la clé, l'événement keydown 事件将被重复触发。一旦用户释放密钥,就会触发 keyup est déclenché.

Écoutez les événements du clavier

À ce stade, je tiens à mentionner quelque chose d’assez évident. Un clavier est un périphérique de saisie utilisé pour obtenir des informations de la part de l'utilisateur. Nous agissons en fonction de ces commentaires. Cependant, il existe d'autres moyens permettant aux utilisateurs d'envoyer des commentaires.

Si vous souhaitez suivre les champs de saisie que l'utilisateur remplit dans un formulaire, il est plus logique d'utiliser d'autres événements sur ces entrées (comme change ).

De plus, les événements de clavier ne sont générés que pour les éléments pouvant recevoir le focus. Cela inclut d'autres éléments avec l'attribut <input> 元素、<textarea></textarea> 元素、<summary></summary> 元素以及具有 contentEditabletabindex.

Par exemple, vous ne pourrez pas écouter les événements du clavier sur les éléments de paragraphe à moins que vous définissiez les attributs tabindex ou contentEditable. Cependant, il finira par remonter dans l'arborescence DOM, vous pouvez donc toujours attacher un keydown ou un écouteur d'événement tabindexcontentEditable 属性,否则您将无法侦听段落元素上的键盘事件。但是,它最终会在 DOM 树中冒泡,因此您仍然可以将 keydownkeyup au document.

Voici un exemple :

document.addEventListener("keydown", keyIsDown);

function keyIsDown(event) {
    // Do whatever you want!
}
Copier après la connexion

Vous pouvez également fournir des rappels sous forme de fonctions fléchées :

document.addEventListener("keydown", (event) => {
    // Do whatever you want!
});
Copier après la connexion

Obtenir des informations sur les événements du clavier

Dans l'extrait de code de base de la section précédente, nous avons défini une fonction de rappel. Cette fonction accepte un objet event comme argument. Cet objet event contient toutes les informations dont vous pourriez avoir besoin pour accéder à un événement keydown ou event 对象作为其参数。此 event 对象包含您可能需要访问的与 keydownkeyup.

Voici quelques propriétés utiles que vous devriez connaître :

  1. key : Cette propriété renvoie une chaîne représentant la valeur du caractère de la touche enfoncée.
  2. code : Cette propriété renvoie une chaîne représentant le code de la touche physique enfoncée.
  3. repeatrepeat:如果长时间按住某个键,该属性将返回布尔值 true,导致 keydown : Si une touche est enfoncée pendant une longue période, cette propriété renverra une valeur booléenne true, provoquant l'événement keydown déclenché plusieurs fois.
  4. altKeyaltKey:如果用户按下 Alt 键(在 Windows 上)或 Option 键(在在 macOS 上)当 keydown : si l'utilisateur appuie sur la touche
  5. Alt
  6. (sous Windows) ou sur la touche OptionctrlKey:如果用户在 keydown 事件触发时按下 Control 键,则此属性返回布尔值 true (sous macOS) lorsque l'événement keydown se déclenche.
  7. ctrlKeymetaKey:如果用户在 keydown 事件触发时按下 Meta 键,则此属性返回布尔值 true : Si l'utilisateur appuie sur la touche
  8. Control
  9. lorsque l'événement keydown se déclenche, cette propriété renvoie une valeur booléenne true. shiftKey:如果用户在 keydown 事件触发时按下 Shift 键,则此属性返回布尔值 true
  10. metaKey
 : Si l'utilisateur appuie sur la touche

Metakeydown 事件被触发时”部分。这意味着,如果在执行上述任一操作时按下 A3 等键,这些属性的值将为 true ,用于 keydown lorsque l'événement keydown se déclenche, cette propriété renvoie une valeur booléenne true.

shiftKey🎜 : Cette propriété renvoie une valeur booléenne true si l'utilisateur appuie sur la touche 🎜Shift🎜 lorsque l'événement keydown se déclenche. 🎜 🎜 🎜Vous remarquerez que j'ai inclus la partie "lorsque l'événement keydown est déclenché" dans les quatre dernières descriptions de propriétés. Cela signifie que si une touche telle que 🎜A🎜 ou 🎜3🎜 est enfoncée lors de l'exécution de l'une des actions ci-dessus, la valeur de ces propriétés sera true pour le keydown événement . La touche est également enfoncée. 🎜 🎜Après vous être concentré sur la démo CodePen ci-dessous, essayez d'appuyer sur des touches individuelles ou des combinaisons de touches pour voir les valeurs des différentes propriétés changer. 🎜

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

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

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

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

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

响应键盘事件

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

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);
  }
});
Copier après la connexion

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

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

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

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

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

最终想法

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Les 5 meilleurs IDE pour le développement WordPress (et pourquoi) Les 5 meilleurs IDE pour le développement WordPress (et pourquoi) Mar 03, 2025 am 10:53 AM

Choisir le bon environnement de développement intégré (IDE) pour le développement WordPress Depuis dix ans, j'ai exploré de nombreux environnements de développement intégrés (IDE) pour le développement WordPress. La variété pure - gratuite à commerciale, basique à FEA

Créer des plugins WordPress avec des techniques OOP Créer des plugins WordPress avec des techniques OOP Mar 06, 2025 am 10:30 AM

Ce didacticiel montre la construction d'un plugin WordPress à l'aide de principes de programmation orientée objet (OOP), tirant parti de l'API Dribbble. Affinons le texte pour plus de clarté et de concision tout en préservant la signification et la structure d'origine. Objet-ori

Comment transmettre des données PHP et des chaînes à JavaScript dans WordPress Comment transmettre des données PHP et des chaînes à JavaScript dans WordPress Mar 07, 2025 am 09:28 AM

Meilleures pratiques pour passer des données PHP à JavaScript: une comparaison de WP_localize_script et WP_ADD_INLINE_Script Le stockage des données dans les chaînes statiques dans vos fichiers PHP est une pratique recommandée. Si ces données sont nécessaires dans votre code JavaScript, incorporez

Comment intégrer et protéger les fichiers PDF avec un plugin WordPress Comment intégrer et protéger les fichiers PDF avec un plugin WordPress Mar 09, 2025 am 11:08 AM

Ce guide montre comment intégrer et protéger les fichiers PDF dans les articles et pages WordPress à l'aide d'un plugin PDF WordPress. Les PDF offrent un format convivial et universellement accessible pour divers contenus, des catalogues aux présentations. Cette méthode Ens

See all articles