キーボードテスト ブラウザ キーイベント 順序 確認

ブラウザでキーイベントの順序を確認するには、キーボードテストサイトを開き、キーを1回押してから離し、表示される反応を観察します。通常は押したときにkeydown、離したときにkeyupが発生します。長押しや複数キーの同時押しも試すと、連続入力やキーの組み合わせによる違いを確認できます。Macでも基本的なキー入力を調べられますが、CommandキーやFnキーなどはOS側で処理される場合があります。

クイックアンサー：キーイベントの発生順序を詳しく調べるには、keydownやkeyupなどのイベント名を記録できる環境が必要です。キーを押したときに画面上のキーボードが光るだけのテストでは、入力の有無は確認できても、イベントの細かな順序や発生時刻までは分からない場合があります。

ブラウザでキーイベントの順序を確認する手順

キーボードテストオンラインを使うと、キー入力に対するブラウザの反応を手軽に確認できます。ただし、押されたキーを表示するだけのテストと、keydownやkeyupなどのイベントを時系列で記録するテストは同じではありません。イベントの発生順序を調べたい場合は、イベント名や発生時刻を確認できる環境を使いましょう。

1. キーボードテストサイトを開く

キー入力テストに対応したページを開き、キーボードの表示や入力結果を確認できる状態にします。ブラウザのキー入力を確認する基本的な仕組みについては、ブラウザでキー入力を確認する仕組みと使い方も参考になります。

イベントの順序まで確認するには、使用するテスト画面がイベント名を記録できるかを確認してください。押したキーが光るだけの画面では、keydownとkeyupの発生順序や、長押し中の繰り返し回数までは判断できない場合があります。

2. 1つのキーを押してから離す

まずは英数字などのキーを1つ選び、次の手順で操作します。

1. キーを押して、画面に表示される反応を確認します。
2. キーを押したままにせず、すぐに離します。
3. イベントを記録できる場合は、keydownとkeyupの順番を確認します。
4. 同じキーを数回押し、毎回同じ順序で記録されるか比較します。

通常の単押しでは、キーを押したときにkeydown、キーを離したときにkeyupが発生します。両方が記録されていれば、少なくともその操作について、押下と解放に対応するイベントを観測できたことになります。

3. フォーカスがある状態で操作する

ブラウザのキーイベントを確認するときは、フォーカスの状態にも注意が必要です。入力欄やテスト画面にフォーカスがあるかどうかによって、キー入力の受け取り方が変わることがあります。

• テスト画面にフォーカスがある：画面側でキー入力を受け取れる状態です。
• 別の入力欄にフォーカスがある：入力欄への文字入力が優先され、テスト画面では期待した結果にならない場合があります。
• ブラウザやOSがキー操作を処理する：一部のショートカットなどは、ページ側で通常どおり検出できないことがあります。

キーを押しても記録されない場合は、すぐにキーボードの故障と判断せず、テスト画面をクリックしてから再度試してください。ブラウザのキーイベントを記録するページでは、イベントの対象や記録条件も確認すると原因を絞り込みやすくなります。

4. イベントの順序を時系列で比較する

イベントの詳細を確認できる場合は、イベント名だけでなく、対象キーや発生時刻も比較します。たとえば、同じキーを単押ししたときと長押ししたときで記録がどう変わるかを調べると、単純な押下・解放と連続入力を区別しやすくなります。

確認項目	見るポイント	分かること
イベント名	keydown、keyupなど	押下や解放に対応するイベント
キー情報	event.key、event.code	入力上のキー情報と物理キーの識別情報
発生時刻	各イベントの記録時刻	観測できたイベントの前後関係
繰り返し情報	event.repeat	長押しによるキー入力の繰り返しかどうか

発生時刻が表示されないテストサイトでは、画面の反応だけから細かな時間差を判断することはできません。また、画面に表示された順番は、そのテストが記録した順番であり、キーボード内部の信号やOS内のすべての処理順序を直接示すものではありません。

keydown・keyup・長押しイベントの順序と見方

ブラウザでキー入力の動作確認をするときは、keydown、keyup、長押し中の繰り返しを分けて考えることが大切です。イベントの数が増えた場合でも、必ずしもキーが二重に反応したり、故障したりしているわけではありません。

• keydown：キーが押されたときに発生するイベントです。押したままにしている間、キーによっては繰り返し発生することがあります。
• keyup：キーを離したときに発生するイベントです。

1回だけ押してすぐに離した場合、基本的にはkeydownの後にkeyupを観測します。keydownが記録されてもkeyupが確認できない場合は、キーを離した操作がテスト画面に届かなかった可能性や、画面がイベントを記録できていない可能性を考えます。

ただし、ブラウザのフォーカスが移動したり、ウィンドウが非アクティブになったりすると、通常の操作と異なる結果になる場合があります。1回の記録だけで原因を断定せず、フォーカスを戻して同じ操作を繰り返してください。

長押しではevent.repeatを確認する

キーを押し続けると、キーボードやOS、ブラウザの処理によって、keydownが繰り返し発生することがあります。このような繰り返し入力を調べるときに役立つのがevent.repeatです。

操作	観測される可能性がある動き	確認ポイント
キーを短く押して離す	keydownの後にkeyup	押下と解放の両方が記録されるか
キーを長押しする	複数のkeydownが記録される場合がある	繰り返しイベントの有無とevent.repeat
長押し後にキーを離す	繰り返しのkeydownの後にkeyup	解放時のイベントが記録されるか
素早く連続して押す	複数の押下・解放イベント	各操作を区別して記録できるか

event.repeatは、keydownイベントがキーの繰り返しによるものかを示す情報です。長押しのテストでは、単にkeydownが何回記録されたかだけでなく、この値も確認すると、最初の押下と繰り返しを区別しやすくなります。

一方、キーを長押ししても、すべての環境で同じ回数や間隔のイベントが発生するとは限りません。繰り返しの開始タイミングや頻度を比較するときは、使用するキーボード、OS、ブラウザなどの条件をそろえてください。

イベントの順序が想定と異なるとき

キーイベントの記録が予想と違う場合は、次の点を順番に確認します。

1. 操作方法：キーを1つずつ押し、短く押す場合と長押しする場合を分けます。
2. フォーカス：テスト画面がキー入力を受け取れる状態か確認します。
3. 記録方法：押されたキーの表示だけでなく、イベント名や発生時刻が記録されているか確認します。
4. 再現性：同じキーを複数回試し、同じ傾向が現れるか比較します。

イベントの記録が一致しないからといって、直ちにキーボードの故障とは限りません。ブラウザ側の処理、フォーカス、入力方式、テスト画面の記録仕様を切り分けることが重要です。

event.keyとevent.codeの違いを日本語配列で確認する

キーイベントの内容を読み解くには、event.keyとevent.codeの違いを理解しておく必要があります。どちらもキー入力に関する情報ですが、表しているものは異なります。日本語配列のキーボードで記号入力などを調べる場合は、両者を混同しないようにしましょう。

event.keyは入力されたキーの意味を表す

event.keyは、キーボード入力によって得られる文字や、Shiftなどの修飾キーを表す値を確認するために使います。文字キーでは、Shiftの状態や入力設定などによって値が変わることがあります。

たとえば、同じ物理キーでも、Shiftを押しているかどうかによって入力される文字が変わる場合があります。記号が期待したとおりに表示されないときは、event.keyの値と実際の入力設定を確認してください。

event.codeは物理キーの位置を識別する

event.codeは、キーボード上の物理的なキー位置を識別するための情報です。入力される文字そのものとは異なるため、キーボード配列や入力設定が違う環境では、event.keyとevent.codeの見え方が一致しないことがあります。

比較項目	event.key	event.code
主な意味	入力された文字やキーの意味	物理キーの識別情報
Shiftの影響	入力結果が変わる場合がある	物理キーの識別情報自体は通常変わらない
配列・入力設定	入力設定によって値が変わる場合がある	物理的な位置を基準に確認できる
主な用途	入力文字や修飾キーの確認	どの物理キーが押されたかの確認

日本語配列とUS配列で記号を比較する

日本語配列とUS配列では、記号キーの配置や入力方法が異なります。そのため、キーを押したときに表示される文字だけを見て、物理キーが正しく検出されているかどうかを判断するのは適切ではありません。

確認するときは、次の手順を試してください。

1. 普段使用している配列と入力設定を確認します。
2. 記号キーを1つ押し、event.keyの値を確認します。
3. 同じ操作でevent.codeも記録し、物理キーの識別情報を比較します。
4. Shiftを押しながら同じキーを操作し、event.keyの変化とevent.codeの変化を分けて確認します。

キーの位置や記号の配置そのものを比較したい場合は、JIS配列とUS配列の違いも参照してください。キーボードテスト 日本語配列で結果が予想と異なる場合でも、物理キーが検出されているか、入力文字が期待どおりかを分けて調べることで、原因を絞り込みやすくなります。

関連ページ: キーボードテスト 英語 配列｜US配列のキー入力と動作を確認する方法 | キーボードテスト

日本語入力中やブラウザの既定動作で結果が変わる場合

日本語入力中は、通常のキー操作と日本語入力システム（IME）による変換操作を区別して確認する必要があります。キーボードテストで表示されるイベントの順序や種類が、普段の文字入力時と異なっていても、必ずしもキーボードの故障を意味するわけではありません。

IMEの変換中は通常入力と分けて確認する

日本語入力では、文字を入力してから変換候補を選ぶまでに、IMEが入力を処理します。変換中のキー操作は、通常の文字入力とは異なる形でブラウザに伝わる場合があります。

JavaScriptのキーイベントには、IMEによる変換処理中かどうかを示す event.isComposing というプロパティがあります。これが真の場合、そのイベントは日本語などの入力変換処理中に発生した可能性があります。

イベント順序を比較するときは、次の手順で条件をそろえましょう。

1. 日本語入力をオフにし、英数字を入力する状態でキーイベントを記録する。
2. 同じキーを押し、離したときの記録を確認する。
3. 日本語入力をオンにし、文字入力や変換中のキー操作を試す。
4. event.isComposing の値やイベントの違いを確認する。
5. 両方の結果を比較し、通常入力とIME処理のどちらで差が生じるかを切り分ける。

すべてのキーボードテストサイトがIMEの状態を表示するわけではありません。変換中のイベント情報を取得できない場合は、通常入力時の結果を基準にし、IMEの設定や動作を別に確認してください。

フォーカスとブラウザの既定動作に注意する

キーイベントは、入力欄やテスト画面など、フォーカスがある要素を中心に処理されます。フォーカスが別の場所に移っていると、キーを押してもテスト画面に記録されないことがあります。

また、ブラウザやOSが特定のキー操作を独自の機能に割り当てている場合、イベントがテスト画面に届かないことがあります。例えば、F5キーは一般的なブラウザでページの再読み込みに使われます。テスト画面が更新されると、それまでのログが失われる可能性もあります。

CtrlキーやAltキー、MacのCommandキーを使ったショートカットも、ブラウザやOSの操作として処理される場合があります。ショートカットの動作確認では、ページ内で検出できたイベントだけを見て、キーボードが正常かどうかを決めないようにしましょう。

イベントが記録されないときの原因と切り分け

キーイベントが記録されない場合は、すぐにキーボード本体の故障と判断せず、ブラウザ、OS、入力方式、キーボード本体の順に確認すると原因を絞り込みやすくなります。

• テスト画面を開き直し、画面内の操作領域にフォーカスを合わせる。
• ほかのタブや入力欄にフォーカスが移っていないか確認する。
• 別の対応ブラウザでも同じキーを試す。
• ページの再読み込みでログが消える場合に備え、必要な記録を先に控える。

特定のブラウザだけでイベントが記録されないなら、ブラウザの仕様や設定、拡張機能などが影響している可能性があります。別のブラウザでも同じ症状が出るかを確認すると、切り分けに役立ちます。

OSとキーボードドライバーを確認する

ブラウザを変えても改善しない場合は、OS上のほかの入力欄で同じキーが反応するかを試してください。メモ帳などの文字入力欄で入力できるか、修飾キーが正常に働くかを確認します。Macでは、標準のテキスト入力ができるアプリや、キーボード設定も確認できます。

OS側でも入力できない場合は、キーボードドライバー、OSの入力設定、接続状態などを確認します。必要に応じて、OSの設定画面でキーボードが認識されているかを調べ、メーカーが提供する適切なドライバーや更新手順を確認してください。

Fnキーやメディアキーの制約を確認する

ノートパソコンのFnキーや、音量・明るさなどを操作するメディアキーは、一般的な文字キーと同じようにブラウザへイベントが届くとは限りません。機種や設定によっては、OSやキーボードのファームウェア側で処理されます。

次のように、通常のキーと特殊なキーを分けて確認しましょう。

• 通常の文字キー：テスト画面とOSの入力欄の両方で反応を確認する。
• 修飾キー：ShiftやCtrl、MacのCommandなどを単独で押した場合と、ほかのキーと組み合わせた場合を比較する。
• Fnキー：単独押しとFnキーを使った機能操作を分けて試す。
• メディアキー：音量や再生など、対応する機能がOS側で動作するかを確認する。

特殊キーがテスト画面に表示されなくても、OS側で機能が動作しているなら、ブラウザの検出範囲が原因である可能性があります。反対に、OS側でも反応せず、接続や設定を確認しても改善しない場合は、キーボード本体の問題も検討します。

単独では検出されるキーが、複数キーを同時に押すと記録されなくなる場合は、イベントの取得制限だけでなく、キーボードの同時入力性能も確認しましょう。キーの組み合わせによっては、キーボード側で入力を認識できないことがあります。

単独押しでは正常なのに、ゲームや特定の操作で同時入力が欠ける場合は、Nキーロールオーバーとゴーストキーの違いも参考になります。

キーイベント確認でよくある間違い

キーボードチェックの結果を正しく読むには、イベントログに表示された情報と、実際にキーボードが行った操作を混同しないことが重要です。

イベントの順序が違えば故障だと判断する

keydownとkeyupの記録は、キーを押したときと離したときのイベントを示します。ただし、複数キーを操作した場合や、ブラウザが特定の操作を処理した場合は、ログの見え方が変わることがあります。

1回の操作だけで異常と決めず、同じ条件で複数回試し、単独押しと同時押しの結果を比較してください。テストサイトが記録できたイベントと、OSやブラウザ内部で処理されたすべての操作は同じではありません。

event.key は入力された文字やキーの意味に関係し、event.code はキーボード上の物理的なキー位置を識別するために使われます。日本語配列とUS配列では、同じ位置のキーでも入力結果が異なる場合があります。

そのため、文字が想定と違う場合は配列や入力設定を確認し、物理的な位置を調べたい場合はキー位置に関する情報を確認します。文字の違いだけで、スイッチやキーの故障と断定しないようにしましょう。

長押しのイベントを二重入力と誤解する

キーを長押しすると、環境やキーによっては、押している間にkeydownイベントが繰り返し発生します。event.repeat は、そのイベントがキーのリピートによるものかを確認するための情報です。

同じキーのkeydownが複数記録されても、必ずしも複数回押したわけではありません。キーを一度だけ押した場合と長押しした場合を区別してログを読みましょう。

IMEやOSのショートカットを考慮しない

日本語変換中はIMEが入力を処理し、ブラウザショートカットはページ外の動作として扱われることがあります。MacのCommandキーを使う操作でも同様に、テスト画面にイベントが表示されない場合があります。表示されないからといって、入力操作そのものが発生していないとは限りません。

検査するときは、フォーカス、IMEのオン・オフ、ブラウザ、キーの組み合わせをできるだけ統一してください。条件を変えて比較することで、どの環境で結果が変わるのかを判断しやすくなります。

まとめ：イベント順序を確認した後に行うこと

ブラウザのキーボードテストでは、キーを押したときと離したときのイベントを観察できますが、すべてのキー操作が記録されるとは限りません。IME、フォーカス、ブラウザの既定動作、OSの処理、同時入力性能などを分けて考えることが大切です。

Macでキーボードテストを行う場合も、基本的な確認手順は同じです。ただし、Commandキー、Fnキー、メディアキーなどはmacOS側で処理される場合があるため、ブラウザの表示だけで正常性を判断しないようにしましょう。

まず通常の文字キーを単独で試し、続いて修飾キーとの同時押し、日本語入力中の操作、特殊キーの順に確認します。異常が見つかった場合は、同じキーを別のブラウザとOSの入力欄でも試し、症状が発生する範囲を絞り込んでください。