JavaScript KeyCode検索
任意のキーを押してkeyCode、key、code、whichの値を取得します
キーボード入力の取得
ここにフォーカスしてキーを押す
キーボードイベントはこの領域内でのみ取得されます。Tabはキーを記録し、次の操作項目へフォーカスを移します。
すべてのキーボードイベント情報を取得するには物理キーボードを使用してください。モバイルのキーボードでは一部のプロパティが省略される場合があります。
最近のキー入力
直近10回のキー入力がここに表示されます。
キーボードイベントの詳細
event.keyevent.codeevent.keyCode非推奨event.which非推奨event.locationevent.repeat修飾キー
入力取得領域にフォーカスすると、キーボードイベントを確認できます。
JavaScript KeyCode検索について
無料のインタラクティブな開発者ツールJavaScript KeyCode検索は、任意のキーを押した瞬間にキーボードイベントの全プロパティを表示します。キーボードショートカット、ゲーム操作、アクセシブルなナビゲーションを実装する際、event.key、event.code、event.keyCode、event.whichの正確な値を把握しておくことは、ブラウザー間で安定して動作するJavaScriptを書くうえで欠かせません。
現代のウェブアプリケーションは、フォーム検証からリアルタイム共同編集ツールまで、あらゆる場面でキーボードイベント処理に大きく依存しています。このキーコード検索ユーティリティは、キーが押された瞬間に、物理キーコード、論理キー値、位置識別子、すべての修飾キーの状態(Shift、Ctrl、Alt、Meta)をブラウザー上でそのまま表示し、セットアップ不要で推測に頼る手間をなくします。
静的なキーコード一覧表とは異なり、このライブJavaScriptキーイベントテスターは実際のブラウザーイベントを取得するため、さまざまなOSやキーボード配列での動作を確認できます。非推奨のプロパティも明示されるので、現行のW3Cキーボードイベント標準に沿った将来性のあるコードを書くのに役立ちます。
主な機能
- キー入力と同時に、次のイベントプロパティをリアルタイムで表示します：
event.key、event.code、event.keyCode、event.which、event.location - Shift、Ctrl、Alt、Metaの状態を示す視覚的な修飾キーインジケーター
- keyCodeやwhichなどレガシープロパティの非推奨バッジ
- 各イベントプロパティの値をワンクリックでコピー
- すべてのキーデータを整形済みJSONオブジェクトとしてエクスポート
- 直近10回のキー入力を記録し比較できる履歴テーブル
- 左右のキーやテンキーの位置を自動的に判別
- 直感的に識別できるキーの視覚的表示
- ファンクションキー、矢印キー、特殊文字を含むすべてのキーに対応
- ダークモード対応の完全レスポンシブデザイン
JavaScript KeyCode検索の使い方
- 入力エリアにフォーカス：ツール上部の破線で囲まれたキー入力ゾーン内をクリックして、キーボードの待ち受けを有効にします。
- 任意のキーを押す：キーボードのキーを押すと、すべてのイベントプロパティが下のプロパティ一覧に即座に表示されます。
- 修飾キーの状態を確認：Shift、Ctrl、Alt、Metaのインジケーターで、キー入力時にどの修飾キーが有効だったかを確認します。
- 値をコピー：各プロパティの横にあるコピーアイコンをクリックするとその値をコピーできます。「すべてJSONでコピー」ボタンを使うと、全プロパティを一括でエクスポートできます。
- キーを比較：複数のキーを続けて押し、履歴テーブルまでスクロールして、各コードを並べて比較します。
- クリアして繰り返す：「クリア」ボタンですべてのデータをリセットし、新しいテストを始めます。
活用例
- キーボードショートカットの開発：ウェブアプリケーションに独自のショートカットを実装するために、正しいkey値とcode値を確認します。
- ゲーム操作：event.codeを確認して、キー配列に依存しないキーバインドで物理キーをゲームのアクションに割り当てます。
- アクセシビリティテスト：キーボード操作が正しく機能し、すべてのインタラクティブ要素が想定どおりのキーに反応することを確認します。
- レガシーコードの移行：古いプロジェクトで使われている非推奨のevent.keyCode値に対応する、最新のevent.keyを見つけます。
- ブラウザー間のデバッグ：Chrome、Firefox、Safari、Edgeでキーイベントが一貫した値を返すことを確認します。
- 入力フォームの検証：テキストフィールドで特定の文字を許可またはブロックするために、正確なキー値を調べます。
- チュートリアル・ドキュメント作成：開発者向けガイドやリファレンス資料に載せる正確なキーコードのデータをすばやく調べられます。
- テンキーとメインキーボードの区別：locationプロパティを使って、テンキーと通常の数字キーを区別します。
よくある質問
event.keyとevent.codeの違いは何ですか?
event.keyはキーの論理値(Shiftの有無に応じて「a」または「A」など)を返し、event.codeは修飾キーやキーボード配列に関係なく、キーボード上の物理キー(「KeyA」など)を返します。文字入力にはevent.keyを、キー位置に基づくショートカットにはevent.codeを使います。
event.keyCodeは今でも安全に使えますか?
event.keyCodeはW3Cによって正式に非推奨とされており、ブラウザーによって動作が異なる場合があります。新規プロジェクトではevent.keyまたはevent.codeを使用してください。ただし、多くのレガシーコードベースが今もkeyCodeに依存しているため、このツールでは後方互換性の参考として表示しています。
locationフィールドが重要なのはなぜですか?
キーボード上の複数の場所にあるキー、たとえば左Shiftと右Shift、数字行とテンキーを区別するのがevent.locationプロパティです。重複するキーを区別する必要があるアプリケーションでは不可欠です。
このツールは無料ですか？
はい、JavaScript KeyCode検索は完全無料で、登録、利用回数の制限、隠れた料金は一切ありません。開発やテストに必要なだけ何度でもご利用いただけます。
データは安全ですか?
もちろんです。キー検出はすべてネイティブのJavaScriptキーボードイベントを使ってブラウザー内だけで行われます。キー入力やイベントデータがサーバーに送信されることは一切なく、入力内容は端末の外に出ません。
モバイルデバイスでも使えますか?
このツールは物理キーボードでの利用に最適です。モバイルデバイスでは、画面上のキーボードがすべてのイベントプロパティを一貫して発生させない場合があります。確実な結果を得るには、デスクトップまたはノートパソコンを使うか、モバイルデバイスに外付けキーボードを接続してください。
ヒントとベストプラクティス
- 文字入力にはevent.keyを優先：キーボード配列、言語、修飾キーの状態が自動的に考慮されます。
- ゲーム操作にはevent.codeを使用：物理キーの位置は、ユーザーのキーボード配列(QWERTY、AZERTY、Dvorak)に関係なく一定です。
- 修飾キーの組み合わせを必ずテスト：Ctrl+Shift+キーやAlt+キーを押して、ショートカットのリスナーが正しい組み合わせを検出できているか確認します。
- 履歴テーブルでパターンを確認：複数のキー入力を比較すると、不整合に気づいたり、目的のコードをより早く見つけたりできます。
- ドキュメント用にJSONをエクスポート：「すべてJSONでコピー」機能を使えば、正確なキーデータをコードのコメントや開発者向けドキュメントに直接貼り付けられます。
- 複数のブラウザーでテスト：特殊キーを中心に、キーイベントの値はブラウザーによって異なることがあります。対象ブラウザーで必ず確認してください。