キーイベントは、OSやブラウザ間であまり互換性がありません。
キーイベントには、次の3種類があります。
| イベント | 発生タイミング | Eventオブジェクトから得られる情報 |
|---|---|---|
| keydown | ユーザーがキーを押したとき | 仮想キーコード |
| keypress ※1 | ユーザーがキーを押して離したとき | 文字コード |
| keyup | ユーザーがキーを離したとき | 仮想キーコード |
キーボードの文字キーに対しては「keypress」、それ以外の修飾キーなどには「keydown」イベントが便利です。
DOMレベル0のハンドラではonkeydown、onkeypressの2つを1つの要素に登録できません、登録しようとすると、先に登録したものが上書きされます。
element.onkeydown = Func;
element.onkeypress = Func; // onkeydownが無効となる
IMEが有効な状態では、Event.preventDefault()で入力を防止できません。
キーの入力時には、キーイベントは
の順で発生します。キーを押し続けた場合にはkeydownとkeyupの間に、keypressが連続して発生します。ただしこれは、OSやブラウザによって異なることがあります。
キーイベントの発生タイミングを確認できます。
キーイベント発生時には、ハンドラにKeyEventオブジェクトが渡されます。
「key」から始まる名前の「k」は小文字であり、それ以外の「Key」は大文字です。JavaScriptの命名規則はLower Camel Caseであり、それを念頭に記述します。
| 型 | プロパティ | 内容 |
|---|---|---|
| boolean | altKey ※1 | Altキーが押されていたかどうか |
| boolean | ctrlKey ※1 | Ctrlキーが押されていたかどうか |
| boolean | shiftKey ※1 | Shiftキーが押されていたかどうか |
| DOMString | key | 押されたキーを表す文字 |
| DOMString | char (IEのみ) | 押されたキーを表す文字 |
| DOMString | code | キーボード上の物理的なキー |
| integer | charCode※2 (非推奨。keyを用いる) |
押されたキーが印刷可能な文字 (printable character) の場合には、そのUnicodeエンコーディング。印刷可能ではない場合にはゼロ。 このプロパティを文字列に変換するにはString.fromCharCode()を使用する。 |
| integer | keyCode (非推奨。keyを用いる) |
押されたキーの仮想キーコード。その値はValue of keyCodeにあるように、システムに依存 押されたキーが印刷可能な文字の場合には、その文字のエンコーディング。印刷可能ではない場合にはブラウザなどに依存。 |
| integer | which (非推奨) |
|
キーイベントごとの、プロパティを確認できます。
| イベント | key (文字) |
char ※1 (文字) |
code (コード) |
charCode (文字コード) |
keyCode (仮想キーコード ※2) |
|---|---|---|---|---|---|
| keydown | |||||
| keypress | |||||
| keyup |
| キーの種類 | 戻り値 |
|---|---|
| 印字可能な文字 | Unicode文字 |
| 制御キーまたは特殊文字 | Key Valuesにある定義された値 |
| デッドキー (dead key) | "Dead" |
| 制御キーと印字可能な文字の同時押し | 印字可能な文字のUnicode文字 |
| 特殊なキー | |
| 不明 | "Unidentified" |
IMEが有効な状態では"Process"が返されます。キーボードイベントの key の値 - Web API | MDN
キーボード上の物理的なキーを表します。そのため言語が異なっても同じ位置のキーとなりますが、異なる文字のキーとなることがあります。KeyboardEvent: code プロパティ - Web API | MDN
| プロパティ | キーボード | |
|---|---|---|
| 日本語 | 英語(米国) | |
| key | @ | [ |
| code | BracketLeft | BracketLeft |
element.onkeydown = function( event )
{
alert( event.keyCode );
// charCodeは存在する？ (IE9より前はcharCodeをサポートしない)
if( 'charCode' in event )
{
alert( event.charCode );
}
}