キーイベントは、OSやブラウザ間であまり互換性がありません。
キーイベントには、次の3種類があります。
| イベント | 発生タイミング | Eventオブジェクトから得られる情報 |
|---|---|---|
| keydown | ユーザーがキーを押したとき | 仮想キーコード |
| keypress | ユーザーがキーを押して離したとき | 文字コード |
| keyup | ユーザーがキーを離したとき | 仮想キーコード |
キーボードの文字キーに対しては「keypress」、それ以外の修飾キーなどには「keydown」イベントが便利です。
DOMレベル0のハンドラではonkeydown、onkeypressの2つを1つの要素に登録できません、登録しようとすると、先に登録したものが上書きされます。
element.onkeydown = Func;
element.onkeypress = Func; // onkeydownが無効となる
キーの入力時には、キーイベントは
の順で発生します。キーを押し続けた場合には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 | イベントによって表されるキーのコード Code values - KeyboardEvent.code - Web APIs | MDN |
| integer | charCode※2 (非推奨。keyを用いる) |
押されたキーが印刷可能な文字 (printable character) の場合には、そのUnicodeエンコーディング。印刷可能ではない場合にはゼロ。 このプロパティを文字列に変換するにはString.fromCharCode()を使用する。 |
| integer | keyCode (非推奨。keyを用いる) |
押されたキーの仮想キーコード。その値はValue of keyCodeにあるように、システムに依存 押されたキーが印刷可能な文字の場合には、その文字のエンコーディング。印刷可能ではない場合にはブラウザなどに依存。 |
| integer | which (非推奨) |
|
キーイベントごとの、プロパティを確認できます。
| イベント | key (文字) |
char ※1 (文字) |
code (コード) |
charCode (文字コード) |
keyCode (仮想キーコード) |
|---|---|---|---|---|---|
| keydown | |||||
| keypress | |||||
| keyup |
| キーの種類 | 戻り値 |
|---|---|
| 印字可能な文字 | Unicode文字 |
| 制御キーまたは特殊文字 | Key Valuesにある定義された値 |
| デッドキー (dead key) | "Dead" |
| 制御キーと印字可能な文字の同時押し | 印字可能な文字のUnicode文字 |
| 特殊なキー | |
| 不明 | "Unidentified" |
element.onkeydown = function( event )
{
var keyEvent = event || window.event;
alert( keyEvent.keyCode );
// charCodeは存在する？ (IE9より前はcharCodeをサポートしない)
if( 'charCode' in keyEvent )
{
alert( keyEvent.charCode );
}
}