Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Keyboard events

keydown イベントは、キーが押されたときに発生します。

非推奨の keypress イベントとは異なり、 keydown イベントは生成する文字値に関係なくすべてのキーで発生します。

keydown と keyup イベントは、どのキーが押されたかを示すコードを提供し、 keypress はどの文字が入力されたかを示します。例えば、小文字の "a" は keydown と keyup では 65 と報告され、 keypress では 97 と報告されます。大文字の "A" は、どのイベントでも 65 と報告されます。

キーボード操作の対象となるイベントのターゲットは、現在フォーカスされている、キーボード操作を処理している要素です。これには、<input>、<textarea>、contentEditable がついた何らかの要素、および、<a>、<button>、<summary> など、キーボードで操作できる何らかの要素が含まれます。適切な要素にフォーカスが当たっていなければ、イベントのターゲットは <body> またはルートになります。イベントが捕捉されなければ、イベントは DOM ツリーを Document に達するまでバブリングします。

イベントのターゲットは、異なるキーイベント間で変更されることがあります。例えば、 Tab キーを押したときの keydown のターゲットは、 keyup のターゲットとは異なるものになるでしょう。フォーカスが変更されるからです。

イベント

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`KeyboardEvent`	1	12	1.5	1.2	18	1
`keydown_event` keydown イベントは、キーが押されたときに発生します。	1	12	6	1.2	18	1
`keyup_event` keyup イベントは、キーが離されたときに発生します。	1	12	6	1.2	18	1
`altKey` KeyboardEvent.altKey は読み取り専用のプロパティで、イベント発生時に alt キー（macOS では Option または ⌥）が押されたか (true) または押されていないか (false) を示す論理値です。	1	12	1.5	1.2	18	1
`code` KeyboardEvent.code プロパティは、（キー入力によって入力された文字ではなく）キーボード上の物理的なキーを表します。つまり、このプロパティはキーボードレイアウトや修飾キーの状態によって変更される前の値を返します。	48	79	38	10.1	48	10.3
`ctrlKey` KeyboardEvent.ctrlKey は読み取り専用のプロパティで、このイベントが発生したときに control キーが押されていた (true) または押されていなかった (false) ことを表す論理値を返します。	1	12	1.5	1.2	18	1
`getModifierState` KeyboardEvent.getModifierState() メソッドは、指定された修飾キーの現在の状態を返します。修飾キーが有効な場合（すなわち修飾キーが押されているかロックされている場合）は true、そうでなければ false になります。	30	12	15	10.1	30	10.3
`getModifierState (key parameter alt)` `"Alt"` を `key` パラメータとして	30	12	15	10.1	30	10.3
`getModifierState (key parameter altgraph)` `"AltGraph"` を `key` パラメータとして	48	79	15	10.1	48	10.3
`getModifierState (key parameter capslock)` `"CapsLock"` を `key` パラメータとして	48	12	15	10.1	48	10.3
`getModifierState (key parameter control)` `"Control"` を `key` パラメータとして	30	12	15	10.1	30	10.3
`getModifierState (key parameter fn)` `"Fn"` を `key` パラメータとして	48	79	15		48
`getModifierState (key parameter meta)` `"Meta"` を `key` パラメータとして	30	79	15	10.1	30	10.3
`getModifierState (key parameter numlock)` `"NumLock"` を `key` パラメータとして	48	79	15		48
`getModifierState (key parameter scrolllock)` `"ScrollLock"` を `key` パラメータとして	48	79	15		48
`getModifierState (key parameter shift)` `"Shift"` を `key` パラメータとして	30	12	15	10.1	30	10.3
`getModifierState (key parameter symbol)` `"Symbol"` を `key` パラメータとして	48	79			48
`isComposing` KeyboardEvent.isComposing は読み取り専用プロパティで、イベントが変換セッションの途中、すなわち Element/compositionstartevent の後かつ Element/compositionendevent の前に発行されたことを示す論理値を返します。	56	79	31	10.1	56	10.3
`key` KeyboardEvent インターフェイスの key プロパティは読み取り専用で、ユーザーが押したキーの値を、 Shift キーなどの修飾キーやキーボードのロケールやレイアウトを考慮した値で返します。	51	12	23	10.1	51	10.3
`key (dead key)` デッドキー	51	79	37	10.1	51	10.3
`key (non printable keys)` 非表示キー	51	12	23	10.1	51	10.3
`key (printable key)` 印刷可能なキー	51	12	29	10.1	51	10.3
`KeyboardEvent` KeyboardEvent() コンストラクターは、新しい KeyboardEvent オブジェクトを生成します。	26	12	31	7	26	7
`location` KeyboardEvent.location は読み取り専用のプロパティで、キーボードやその他の入力機器上のキーの位置を表す unsigned long を返します。	30	12	15	8	30	8
`metaKey` KeyboardEvent.metaKey は読み取り専用のプロパティで、プロパティは、イベントが発生したときに Meta キーが押されていたか (true) あるいは押されていなかった (false) かを示す論理値を返します。オペレーティングシステムによっては、キーが検出されないように遮蔽されることがあります。	1	12	1.5	1.2	18	1
`repeat` repeat は KeyboardEvent インターフェイスの読み取り専用プロパティで、このキーが押しっぱなしになって自動反復している場合、 true の論理値を返します。	137	12	28	10.1	137	10.3
`shiftKey` KeyboardEvent.shiftKey は読み取り専用プロパティで、このイベントが発生したときに shift キーが押されていたか (true) いなかったか (false) を示す論理値を返します。	1	12	1.5	1.2	18	1

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT

addEventListener("keydown", (event) => { })

onkeydown = (event) => { }

実務での使いどころ

Keyboard events の活用

keydown イベントは、キーが押されたときに発生します。

注意点

古いブラウザでは対応していない場合がある。

実装メモ

一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

対応ブラウザ

基本構文

実務での使いどころ

Keyboard events の活用

注意点

実装メモ

参考リンク