JavaScript: キーボードイベント処理をマスターする-＆＃＆プレス-php.cn

JavaScript: キーボードイベント処理をマスターする

PHPz

リリース： 2023-09-04 11:29:02

オリジナル

1288 人が閲覧しました

JavaScript: キーボードイベント処理をマスターする

Web サイト開発者は、読者が何らかの方法で Web サイトと対話できることを望んでいます。訪問者は、ページを上下にスクロールしたり、入力フィールドに書き込んだり、リンクをクリックして別のページにアクセスしたり、キーの組み合わせを押して特定のアクションをトリガーしたりできます。開発者は、これらすべてのイベントをキャプチャし、必要な機能をユーザーに提供できる必要があります。

このチュートリアルでは、JavaScript でのキーボードイベントの処理に焦点を当てます。さまざまな種類のキーボードイベント、特殊なキーイベントの処理、および押されたキーまたは放されたキーに関する情報の取得について学習します。

キーボードイベントタイプ

キーボードイベントは 3 種類に分類されます。これらは、keydown、keypress、および keyup と呼ばれます。

キーが押されている限り、keydown イベントがトリガーされます。すべてのキーがトリガーされます。キャラクター価値を生み出すかどうかは関係ありません。たとえば、キーボードの A または Alt キーを押すと、keydown イベントがトリガーされます。

keypress イベントは非推奨になりました。文字値を生成するキーが押されたときにのみ起動されます。たとえば、A キーを押すとこのイベントがトリガーされますが、Alt キーを押すとイベントはトリガーされません。代わりに keydown イベントの使用を検討してください。

ユーザーが押したキーが放されると、keyup イベントがトリガーされます。

ユーザーがキーボードのいずれかのキーを押し続けたとします。この場合、keydown イベントが繰り返しトリガーされます。ユーザーがキーを放すと、keyup イベントがトリガーされます。

キーボードイベントを聞く

この時点で、かなり明白なことについて言及したいと思います。キーボードは、ユーザーから何らかの入力を取得するために使用される入力デバイスです。私たちはそのインプットに基づいて行動を起こします。ただし、ユーザーが入力を送信する他の方法もあります。

ユーザーがフォームに入力した入力フィールドを追跡したい場合は、その入力で他のイベント ( change など) を使用する方が合理的です。

さらに、キーボードイベントは、フォーカスを受け取ることができる要素に対してのみ生成されます。これには、<input> 要素、<textarea></textarea> 要素、<summary></summary> 要素、および contentEditable または tabindex を持つ要素が含まれます。 属性のその他の要素。

たとえば、tabindex または contentEditable プロパティを設定しない限り、段落要素のキーボードイベントをリッスンすることはできません。ただし、最終的には DOM ツリー内にバブルアップされるため、keydown または keyup イベントリスナーをドキュメントにアタッチできます。

これは例です:

リーリー

コールバックをアロー関数として提供することもできます。

リーリー

キーボードイベントから情報を取得する

前のセクションの基本的なコードスニペットでは、コールバック関数を定義しました。この関数は、引数として event オブジェクトを受け入れます。この event オブジェクトには、keydown または keyup イベントに関連してアクセスする必要があるすべての情報が含まれています。

知っておくべき便利なプロパティをいくつか紹介します:

key: このプロパティは、押されたキーの文字値を表す文字列を返します。
code: このプロパティは、押された物理キーのコードを表す文字列を返します。
repeat: キーが長時間押されると、このプロパティはブール値 true を返し、keydown イベントが発生します。複数回トリガーされる。
altKey: ユーザーが Alt キー (Windows の場合) または Option キー (macOS の場合) を押した場合 keydown イベントがトリガーされます。
ctrlKey: keydown イベントの発生時にユーザーが Control キーを押すと、このプロパティはブール値 true# を返します。＃＃。
metaKey: keydown イベントの発生時にユーザーが Meta キーを押すと、このプロパティはブール値 true# を返します。＃＃。
shiftKey: keydown イベントの発生時にユーザーが Shift キーを押すと、このプロパティはブール値 true# を返します。＃＃。 最後の 4 つのプロパティの説明すべてに、「

イベントが発生したとき」の部分が含まれていることがわかります。これは、上記のアクションのいずれかの実行中に

A や 3 などのキーが押された場合、これらのプロパティの値がに対して true になることを意味します。キーダウンイベント。キーも押されています。 次の CodePen デモに注目した後、個々のキーまたはキーの組み合わせを押して、さまざまなプロパティの値が変化することを確認してください。

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

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

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