JavaScript : capturez les événements du clavier et réagissez-y

Dans cet article, nous verrons comment détecter et répondre à différents événements de clavier en JavaScript. Je vais vous montrer quelques exemples concrets pour que ce soit facile à comprendre.

JavaScript est l'une des technologies de base d'Internet. Il est utilisé par la plupart des sites Web et pris en charge par tous les navigateurs Web modernes sans avoir besoin de plugins. Dans cette série, nous discuterons de différents trucs et astuces qui vous aideront dans votre développement JavaScript quotidien.

En tant que développeur JavaScript, vous devez parfois implémenter des fonctionnalités qui vous obligent à gérer les événements du clavier et à effectuer des actions en fonction de ceux-ci. Heureusement, JavaScript fournit un objet KeyboardEvent intégré qui vous permet de gérer différents types d'événements de clavier.

Événements de clavier en JavaScript

En JavaScript, l'objet KeyboardEvent fournit trois événements : touche enfoncée, touche enfoncée et touche enfoncée.

Lorsque vous appuyez sur n'importe quelle touche du clavier, une série d'événements se produit dans l'ordre suivant.

• Appuyez sur la touche
• Bouton
• Bouton

Les événements clés sont déclenchés lorsqu'une touche du clavier est enfoncée. Et si une touche est enfoncée pendant une longue période, l’événement d’appui sur la touche sera déclenché à plusieurs reprises.

Les événements clés sont principalement déclenchés lorsqu'un caractère imprimable est enfoncé et sont déclenchés après des événements clés. En fait, l'événement clé sert à relayer les personnages produits par l'événement clé. Dans la plupart des cas, les clés autres que des caractères ne déclenchent pas d'événements clés. Bien que certains navigateurs prennent en charge cet événement, il n'est pas recommandé de s'appuyer sur cet événement car il sera supprimé du standard Web.

Les événements de pression de touche sont obsolètes et seront progressivement supprimés dans les navigateurs modernes.

Enfin, l'événement clé est déclenché lorsque la clé est relâchée. Fondamentalement, la combinaison des événements keydown et keydown vous donne un code qui indique quelle touche a été enfoncée.

Chaque événement de clavier fournit deux propriétés importantes : key 和 code。 key 属性用按下的字符填充，而 code 属性用字符的物理键位置填充。例如，如果按 a 字符键，则 key 属性将填充为 a，并且 code 属性将填充为 KeyAConstante. Cependant, le code touche enfoncé n’est pas forcément le même que le caractère ! Si l'utilisateur dispose d'une configuration de clavier alternative, telle que Dvorak, appuyer sur le même code de touche produira des caractères différents.

Ce qui précède est un bref aperçu des événements de clavier en JavaScript. À partir de la section suivante, nous discuterons de ces événements ainsi que d’exemples concrets pour comprendre leur fonctionnement.

keydown Événements

Dans cette section, nous apprendrons comment fonctionnent les événements keydown 事件如何在 JavaScript 中工作。当按下键盘上的任意键时，会触发 keydown en JavaScript. L'événement

est déclenché lorsqu'une touche du clavier est enfoncée.

Jetons un coup d’œil rapide aux exemples suivants.

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

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

keydownComme vous pouvez le voir, nous avons créé un auditeur pour écouter l'événement

. Chaque fois qu'une touche est enfoncée, notre écouteur sera appelé et la valeur et le code de cette touche seront enregistrés sur la console. Allez-y, exécutez-le et voyez comment cela fonctionne.

Jetons un coup d'œil à l'exemple suivant qui montre comment détecter si l'utilisateur a appuyé sur ctrl + a ou ctrl + A

.

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 键。因此，如果 ctrlKeyTout d'abord, ctrlKey est une propriété spéciale de l'objet qui vous indique si la touche Ctrl

a été enfoncée lorsque l'événement

a été déclenché. Donc si ctrlKey est vrai, cela signifie que la touche keyCode 值，如果是 65 或 97，则表示是 a 或 A 与 Ctrl 键一起按下。 KeyboardEvent 对象的 keyCodeCtrl a été enfoncée. Ensuite, nous vérifions la valeur keyCode du caractère appuyé, si c'est 65 ou 97, cela signifie a ou A < /strong> Appuyez simultanément avec la touche

Ctrl

.

La propriété keyCode de l'objet renvoie le code de caractère Unicode de la touche enfoncée. De même, vous pouvez également utiliser la propriété

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

KeyboardEvent🎜, qui vous indique si la touche 🎜Shift🎜 a été enfoncée pendant l'événement keypress. déclenchement. 🎜 🎜Enfin, jetons un coup d'œil à l'exemple suivant qui montre comment autoriser uniquement les lettres dans un champ de saisie d'un formulaire HTML. 🎜

<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>

🎜Dans l'exemple ci-dessus, nous avons défini l'événement 🎜 sur la zone de texte de saisie. Ainsi, lorsque l'utilisateur saisit un texte dans la zone de texte, il appelle la fonction allowOnlyAlphabets. Dans la fonction allowOnlyAlphabets, nous validons la valeur de la propriété keyCode de l'objet événement par rapport à la plage d'alphabets Unicode valide. Par conséquent, la fonction allowOnlyAlphabets renverra true si l'utilisateur appuie sur un caractère alphabétique valide, et false sinon. Le résultat final est que l’utilisateur ne pourra saisir aucun caractère autre que des lettres. 🎜

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 中使用键盘事件以及几个实际示例。

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!