キーイベント (KeyEvent)

キーイベントは、OSやブラウザ間であまり互換性がありません。

キーイベントの種類

キーイベントには、次の3種類があります。

イベント 発生タイミング Eventオブジェクトから得られる情報
keydown ユーザーがキーを押したとき 仮想キーコード
keypress ユーザーがキーを押して離したとき 文字コード
keyup ユーザーがキーを離したとき 仮想キーコード

キーボード文字キーに対しては「keypress」、それ以外の修飾キーなどには「keydown」イベントが便利です。

DOMレベル0のハンドラではonkeydown、onkeypressの2つを1つの要素に登録できません、登録しようとすると、先に登録したものが上書きされます。

element.onkeydown = Foo;
element.onkeypress = Foo; // onkeydownが無効となる

イベントの発生順

キーの入力時には、キーイベントは

  1. keydown
  2. keypress
  3. keyup

の順で発生します。キーを押し続けた場合にはkeydownとkeyupの間に、keypressが連続して発生します。ただしこれは、OSやブラウザによって異なることがあります。

キーイベントの発生タイミングを確認できます。

(フォーカスを外すと、結果がクリアされます。)

 

KeyEventオブジェクト

キーイベント発生時には、ハンドラに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 (非推奨)
  • 英数字のキー … charCodeの値
  • その他のキー … keyCodeの値
※1 Keyの「K」は大文字です。
※2 Internet Explorer 9より前にはありません。charCode property (Internet Explorer) | MSDN
Properties - KeyboardEvent - Web API Interfaces | MDN

キーイベントごとの、プロパティを確認できます。

イベントのプロパティ
イベント key
(文字)
char ※1
(文字)
code
(コード)
charCode
(文字コード)
keyCode
(仮想キーコード)
keydown          
keypress          
keyup          
※1 IE向け

key

キーの種類 戻り値
印字可能な文字 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 );
    }
}