キーボードイベントの取得

onKeyDown, onKeyUp, onKeyPress などのイベントを使って、ユーザーのキーボード入力を検知し、処理することができます。


1. 基本のonKeyDownイベントの使用

const handleKeyDown = (e: React.KeyboardEvent
<HTMLInputElement>) => {
  console.log("押されたキー:", e.key);
};

const App = () => {
  return <input onKeyDown={handleKeyDown} placeholder="キーを押してみてください" />;
};
  • onKeyDownはキーが押された瞬間に発火します。
  • e.keyで実際に押されたキーの文字列が取得できます(例:”Enter”, “a”, “Escape” など)。

2. 特定のキーに反応する(条件分岐)

const handleKeyDown = (e: React.KeyboardEvent
<HTMLInputElement>) => {
  if (e.key === "Enter") {
    alert("Enterキーが押されました");
  }
};

e.key === "Enter"e.code === "Enter" を使って、特定のキーにだけ反応する処理ができます。


3. フォームでEnterキー送信を無効化

const handleKeyDown = (e: React.KeyboardEvent
<HTMLInputElement>) => {
  if (e.key === "Enter") {
    e.preventDefault(); // 送信をキャンセル
  }
};
  • Enterキーでフォーム送信されるのを防ぎたいときに使えます。

4. コンポーネント全体でキーボード入力を検出(useEffect+window)

import { useEffect } from "react";

const App = () => {
  useEffect(() => {
    const handleGlobalKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        console.log("Escが押されました");
      }
    };

    window.addEventListener("keydown", handleGlobalKey);
    return () => window.removeEventListener("keydown", handleGlobalKey);
  }, []);

  return 
<div>全体でEscキーを検知しています</div>;
};

🧠 フォーカスに依存せずグローバルに検出したいときは、windowにリスナーを追加します(useEffectでクリーンアップも忘れずに)。


5. イベント型の指定

イベントの種類 型名
onKeyDown / onKeyUp `React.KeyboardEvent
`
window.addEventListener KeyboardEvent(ブラウザのネイティブイベント)

キーボードイベントを活用することで、ショートカットキー対応・フォーム制御・アクセシビリティ強化などの応用が可能になります。

コメントを残す 0

Your email address will not be published. Required fields are marked *