キーボードイベントの処理 | DOMイベント | JavaScript 超完全入門 基本から発展までのすべて

スポンサーリンク
スポンサーリンク

キーボードイベントとは？

キーボードイベントは、ユーザーがキーボードのキーを押したり離したりする際に発生するイベントです。これらのイベントを使用して、入力フォームやインタラクティブな操作を実装することができます。

主なキーボードイベント

JavaScriptでは、キーボード操作に関連する主なイベントが3つあります。

  • keydown: キーが押されたときに発生
  • keypress: キーが押されたときに文字が生成された場合に発生（非推奨）
  • keyup: キーが離されたときに発生

keydownイベントの使用例

以下は、keydownイベントを使用してユーザーが押したキーの情報を取得する例です。

document.addEventListener("keydown", function(event) {
    console.log("キーが押されました: " + event.key);
    console.log("キーコード: " + event.keyCode);
});

このコードでは、どのキーが押されたのかをコンソールに表示します。event.keyで押されたキーの名前を、event.keyCodeでキーコード（数値）を取得します。

keyupイベントの使用例

keyupイベントは、キーが離されたときに発生します。たとえば、フォームの入力欄に文字が入力されるたびにリアルタイムで処理を行うことができます。

const inputField = document.querySelector("input");

inputField.addEventListener("keyup", function(event) {
    console.log("入力された文字: " + event.key);
});

この例では、ユーザーが入力欄に文字を入力し、キーを離すたびに押されたキーがコンソールに表示されます。

keyイベントのプロパティ

キーボードイベントは、さまざまなプロパティを通じて詳細な情報を提供します。以下は、よく使用されるプロパティのリストです。

プロパティ名 説明
key 押されたキーの名前
keyCode 押されたキーのキーコード（数値）
code 物理的なキーのコード名
shiftKey Shiftキーが押されているかどうか（ブール値）
ctrlKey Ctrlキーが押されているかどうか（ブール値）
altKey Altキーが押されているかどうか（ブール値）

これらのプロパティを活用することで、特定のキーが押されたか、ShiftキーやCtrlキーが同時に押されているかを判断できます。

特定のキーによるアクションの実行

特定のキーを押したときに特定のアクションを実行させることができます。たとえば、Enterキーが押されたときにフォームを送信する動作を実装できます。

document.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        alert("Enterキーが押されました！");
    }
});

この例では、ユーザーがEnterキーを押すとアラートが表示されます。

複数キーの同時押し

複数のキーを同時に押した場合、イベントオブジェクトのshiftKeyやctrlKeyプロパティを使用して、それらのキーが押されているかを確認できます。

Ctrlキーと他のキーの同時押しの例

document.addEventListener("keydown", function(event) {
    if (event.ctrlKey && event.key === "s") {
        event.preventDefault();  // デフォルトの保存操作をキャンセル
        alert("Ctrl + S が押されました");
    }
});

この例では、Ctrl + Sが押された場合にデフォルトの保存動作をキャンセルし、アラートを表示します。

まとめ

キーボードイベントは、フォーム入力の管理やゲームの操作、ショートカットキーの実装など、さまざまな用途で活用できます。特にkeydownとkeyupイベントをうまく活用することで、ユーザーのキーボード操作に対する反応をスムーズに実装できます。さらに、ShiftやCtrlキーなどの修飾キーを利用することで、より高度な操作も可能になります。

スポンサーリンク