KeyboardEvent オブジェクトは、キーボードによるユーザーの操作を示します。個々のイベントがユーザーとキーとの間の単一の操作（または修飾キーとの組み合わせ）を表します。イベントの種類 (keydown,keypress,keyup) はキーボード操作が発生した種類を識別します。

コンストラクター

KeyboardEvent()

KeyboardEvent オブジェクトを生成します。

定数

KeyboardEvent インターフェイスは、以下の定数を定義しています。

キーボード上の位置

以下の定数は、キーイベントがキーボードのどの部分から発生したかを識別します。これらは、KeyboardEvent.DOM_KEY_LOCATION_STANDARD などとしてアクセスされます。

インスタンスプロパティ

このインターフェイスには、親であるUIEvent およびEvent から継承したプロパティもあります。

KeyboardEvent.altKey読取専用

論理値で、このキーイベントが発生した際にAlt （macOS の場合はOption または⌥）キーが押されていればtrue を返します。

KeyboardEvent.code読取専用

文字列で、このイベントが表す物理キーのコード値を返します。

警告:これはユーザーのキーボードレイアウトを無視します。つまり、ユーザーが QWERTY キーボードレイアウトの "Y" の位置（ホーム行の上の行の中央付近）でキーを押した場合、ユーザーが QWERTZ キーボード（これはユーザーが "Z" を期待し、他のすべてのプロパティが "Z" を示すことになる）または Dvorak キーボードレイアウト（これはユーザーが "F" を期待する）であっても、常に "KeyY" を返します。ユーザーに正しいキーストロークを表示したい場合は、Keyboard.getLayoutMap() を使用してください。

KeyboardEvent.ctrlKey読取専用

論理値で、そのキーイベントが発生した際にCtrl キーが押されていればtrue を返します。

KeyboardEvent.isComposing読取専用

論理値で、このイベントがcompositionstart とcompositionend の間に発生したものであればtrue を返します。

KeyboardEvent.key読取専用

文字列で、このイベントが表すキーのキー値を表します。

KeyboardEvent.location読取専用

数値で、キーボードなどの入力機器上のキーの位置を表す値を返します。位置を特定する定数の一覧は、上記のキーボード上の位置にあります。

KeyboardEvent.metaKey読取専用

論理値で、このキーイベントが発生した際にMeta キー（Mac キーボードでは⌘ Command キー、 Windows キーボードでは Windows キー (⊞)）が押されていればtrue を返します。

KeyboardEvent.repeat読取専用

論理値で、このキーが押し続けられて自動リピートしている場合にtrue を返します。

KeyboardEvent.shiftKey読取専用

論理値で、このキーイベントが発生した際にShift キーが押されていればtrue を返します。

古いプロパティ

KeyboardEvent.charCode非推奨;読取専用

キーの Unicode 参照番号を表す数値を返します。このプロパティはkeypress イベントでのみ使用されます。char プロパティが複数の文字を含むキーの場合、これはそのプロパティの最初の文字の Unicode 値です。Firefox 26 では、表示可能な文字のコードが返されます。

KeyboardEvent.keyCode非推奨;読取専用

押されたキーの修飾されていない値を識別する、システムおよび実装に依存する数値コードを表す数値を返します。

KeyboardEvent.keyIdentifier非標準非推奨;読取専用

このプロパティは標準外であり、KeyboardEvent.key に置き換えられて非推奨とされています。これは、DOM Level 3 Events の古い版に含まれていました。

インスタンスメソッド

このインターフェイスには、親であるUIEvent およびEvent から継承したメソッドもあります。

KeyboardEvent.getModifierState()

そのイベントが発生した際に修飾キー (Alt /Shift /Ctrl /Meta) が押されていたかどうかを表す論理値を返します。

古いメソッド

KeyboardEvent.initKeyEvent()非推奨;

KeyboardEvent オブジェクトを初期化します。これは Firefox でのみ実装されていたものですが、もう Firefox でも対応していません。代わりにKeyboardEvent() コンストラクターを使用してください。

KeyboardEvent.initKeyboardEvent()非推奨;

KeyboardEvent オブジェクトを初期化します。これは非推奨になりました。代わりにKeyboardEvent() コンストラクターを使用してください。

イベント

以下のイベントはKeyboardEvent 型に基づいています。以下のリストでは、各イベントは、そのイベントのElement のハンドラーのドキュメントにリンクしおり、これは一般的にすべての宛先、例えばElement、Document、Window に適用されます。

keydown

キーが押されました。

keyup

キーが離されました。

古いイベント

keypress非推奨;

通常は文字値を生成するキーが押されました。このイベントは端末への依存度が高いため、廃止されました。使用すべきではありません。

使用上の注意

イベントにはkeydown,keypress,keyup の 3 種類があります。 Gecko ではほとんどのキーにおいて、以下のようにキーイベントが連続して発生します。

1. そのキーが最初に押された時点でkeydown イベントが発生します。
2. そのキーが修飾キーでなかった場合、keypress イベントが発生します。
3. ユーザーがキーから指を離した時点でkeyup イベントが発生します。

特殊な場合

Caps Lock や Num Lock、 Scroll Lock などのキーは LED 表示も切り替わります。 Windows と Linux では、このようなキーはkeydown とkeyup イベントのみが発生します。

しかし Mac OS X のイベントモデルに関する制約から、Mac OS X の Caps Lock はkeydown イベントのみが発生します。（2007 年モデル以前の）ノート型では Num Lock にも対応していましたが、今日の Mac OS X では外部キーボードにおいても Num Lock に対応していません。 Num Lock キーがある古い MacBook 上では、Num Lock キーによってイベントは何も発生しません。また、 F14 キーが接続されている外部キーボードであれば、 Gecko は Scroll Lock に対応しています。古い特定のバージョンの Firefox では、このキーによってkeypress イベントが発生していました。この矛盾する挙動はFirefox バグ 602812 で修正されました。

自動リピートの扱い

キーが押されたままになると自動リピートが始まります。これによって以下のようにイベントが連続して発生します。

1. keydown
2. keypress
3. keydown
4. keypress
5. <<ユーザーがキーから指を離すまで繰り返し>>
6. keyup

この流れは DOM Level 3 仕様書に定義されているものです。しかし、これには以下のような注意点があります。

Ubuntu 9.4 など一部の GTK 環境における自動リピート

GTK を用いた環境の中には、自動リピート時にネイティブの key-up イベントが発生するものがあります。このため、キーが連続して押されているのか自動リピートなのかを Gecko 側から認識することはできません。そのようなプラットフォームでの自動リピート時では、以下のようにキーイベントが連続して発生します。

1. keydown
2. keypress
3. keyup
4. keydown
5. keypress
6. keyup
7. <<ユーザーがキーから指を離すまで繰り返し>>
8. keyup

こういった環境では残念ながら、自動リピートなのか連打されただけなのかをウェブコンテンツ側から区別することはできません。

例

document.addEventListener(  "keydown",  (event) => {    const keyName = event.key;    if (keyName === "Control") {      // do not alert when only Control key is pressed.      return;    }    if (event.ctrlKey) {      // Even though event.key is not 'Control' (e.g., 'a' is pressed),      // event.ctrlKey may be true if Ctrl key is pressed at the same time.      alert(`Combination of ctrlKey + ${keyName}`);    } else {      alert(`Key pressed ${keyName}`);    }  },  false,);document.addEventListener(  "keyup",  (event) => {    const keyName = event.key;    // As the user releases the Ctrl key, the key is no longer active,    // so event.ctrlKey is false.    if (keyName === "Control") {      alert("Control key was released");    }  },  false,);

仕様書

KeyboardEvent インターフェイスの草案は数多く提案されてきました。まず最初は DOM Events Level 2 でしたが意見がまとまらず破棄され、続いて DOM Events Level 3 が提案されました。これにより、標準外な初期化メソッドが実装されてしまいました (Gecko では DOM Events Level 2 の初期に定義されていたKeyboardEvent.initKeyEvent() が、他のブラウザーでは DOM Events Level 3 の初期に定義されていたKeyboardEvent.initKeyboardEvent() です)。しかし両者のメソッドは、現代的なコンストラクターであるKeyboardEvent() で置き換えられてました。

ブラウザーの互換性

互換性のメモ

• Firefox 65 では、keypress イベントは表示可能でないキーでは発生しなくなりました（Firefox バグ 968056）が、Enter キー、Shift +Enter キー、Ctrl +Enter キーの組み合わせでは発生します (これらはブラウザー間の互換性の目的のために維持されています)。

関連情報

• KeyboardEvent.code
• KeyboardEvent.key
• KeyboardEvent.getModifierState()