JavaScriptでキーボードの値を取得する方法

PHPz
リリース: 2023-04-25 13:56:43
オリジナル
2997 人が閲覧しました

JavaScript は、Web プログラミングで広く使用されている言語であり、ユーザー対話機能の実装に使用できます。キーボード値の取得も、JavaScript でよく使用される操作です。この記事では、JavaScriptを使用してキーボードの値を取得する方法を説明します。

JavaScript のキーボード イベント

JavaScript では、キーボード イベントを使用してキーボード入力をキャプチャできます。キーボード イベントには、キーダウン、キープレス、キーアップの 3 種類があります。

  1. keydown イベント: ユーザーが特殊キー (Shift や Ctrl など) や特殊でないキー (文字や数字など) を含むキーボード上の任意のキーを押すとトリガーされます。
  2. keypress イベント: ユーザーがキーボードの任意のキーを押すとトリガーされますが、これには文字を生成できるキーのみが含まれます。特殊キーはキー押下イベントを生成しません。
  3. keyup イベント: ユーザーがキーボードのキーを放したときにトリガーされます。

これらのキーボード イベントを通じて、ユーザーがキーボードのどのキーを押したかを知ることができ、対応するキーのキー コード値を取得できます。

キー コード値の概念

キー コード値は、キーボード入力デバイスからコンピューターに送信される数値コードを指します。これらのコードは、キーボードの各キーの一意の識別子を表します。各キー コード値には、対応する文字を表すことができる一意の ASCII コード値があります。

JavaScript でキーボード値を取得する方法

JavaScript では、event.keyCode プロパティを使用してキーボード値を取得します。イベント ハンドラーでこのプロパティを使用して、キーボード イベントのキーボード値を取得します。以下に例を示します。

document.addEventListener("keydown", function(event) {
    alert(event.keyCode);
});
ログイン後にコピー

このコードは、keydown イベントをリッスンし、イベントがトリガーされたときに、alert 関数を使用して keyCode 値を表示します。

さらに、イベント オブジェクトの他の関連プロパティを使用して、次のようなキーボード値を取得することもできます。

  1. event.key: 押されたキーに対応する文字を表します。 、小文字の「a」や数字の「3」など。
  2. event.code: 押されたキーの物理的な位置を示します。たとえば、「a」キーのコード値は「KeyA」、数字キー「3」のコード値は「Digit3」です。 」。

keyCode 属性は一部のブラウザではサポートされていませんが、key 属性と code 属性は新しい標準であり、ほとんどの最新のブラウザで使用できることに注意してください。

一般的に使用されるキーボード値

一般的に使用されるキーボード値には、文字、数字、特殊キー (Ctrl、Shift、Enter など) が含まれます。以下は、いくつかの一般的なキーボード値とそれに対応する keyCode 値です:

  • 文字キーと数字キー: keyCode 値は ASCII コード値と同じです。たとえば、次の keyCode 値はa キーは 97、A キーの keyCode 値は 65、0 ~ 9 の数字に対応するキーボードの値はそれぞれ 48 ~ 57 です。
  • 特殊キー: Ctrl キーの keyCode 値は 17、Shift キーの keyCode 値は 16、Enter キーの keyCode 値は 13、Tab キーの keyCode 値は 9 です。

これらのキーボード値を通じて、ユーザーが特定のキーを押したかどうかを判断し、それに応じて応答することができます。

概要

この記事では、JavaScript でキーボードの値を取得する方法を紹介します。イベント処理関数を通じて、キーボード イベントをキャプチャし、対応するキーボード値を取得できます。一般的に使用されるキーボードの値には、文字、数字、特殊キーが含まれており、これらのキーボードの値を理解しておくと、より優れたユーザー インタラクション機能を実現することができます。

以上がJavaScriptでキーボードの値を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!