前の記事 «：ブラウザ上で動作するJavaScript製のMSペイント「CanvasPaint」
次の記事 »：HTMLをJavaScriptのDOM作成文にしてくれる「DOM Tool」

クロスブラウザでのJavaScriptキーボードイベントの扱い方

2006年12月07日

スポンサード リンク

JavaScriptでのキーボードイベントの処理はブラウザによって違っていて、クロスブラウザで動作させるためには、それぞれのブラウザに合ったコードを実行し分ける必要があります。
JavaScriptでキーボードイベントを取得し、どのキーコードが押されたかを判別するサンプルを以下に示します。CtrlキーやShiftキーが押されたかどうかなどのチェック方法も併せて示しています。

このサンプルを活用することで、Webアプリケーションにショートカット機能をつけ、より使い勝手のよいWebアプリケーションを作成する手助けになるはずです。

以下、サンプル。

<html>
<title>クロスブラウザでキーボードイベントを処理する方法</title>
<!-- js コード -->
<script type="text/javascript">

document.onkeydown = function(e) {
    var shift, ctrl; 

    // Mozilla(Firefox, NN) and Opera 
    if (e != null) { 
        keycode = e.which; 
        ctrl = typeof e.modifiers == 'undefined' ? e.ctrlKey : e.modifiers & Event.CONTROL_MASK; 
        shift = typeof e.modifiers == 'undefined' ? e.shiftKey : e.modifiers & Event.SHIFT_MASK; 
        // イベントの上位伝播を防止 
        e.preventDefault(); 
        e.stopPropagation(); 
    // Internet Explorer 
    } else { 
        keycode = event.keyCode; 
        ctrl = event.ctrlKey; 
        shift = event.shiftKey; 
        // イベントの上位伝播を防止 
        event.returnValue = false; 
        event.cancelBubble = true; 
    } 

    // キーコードの文字を取得 
    keychar = String.fromCharCode(keycode).toUpperCase(); 

    // Ctrl同時押しの場合 
    if (ctrl) { 
        if (keychar == "C") { 
            alert('Ctrl+C'); 
        } 
    } else 
    // Shift同時押しの場合 
        if (shift) { 
            if (keychar == "C") { 
                alert('Shift+C'); 
        } 
    // 通常のキーダウン時の場合 
    } else { 
        if (keychar == "C") { 
            alert('C'); 
        } 
    } 
    // 特殊キーコードの対応については次を参照 
    // 27 Esc 
    // 8 BackSpace 
    // 9 Tab 
    // 32 Space 
    // 45 Insert 
    // 46 Delete 
    // 35 End 
    // 36 Home 
    // 33 PageUp 
    // 34 PageDown 
    // 38 ↑ 
    // 40 ↓ 
    // 37 ← 
    // 39 → 
    // 処理の例 
    // if (keycode == 27) { 
    // alert('Escapeキーが押されました'); 
    // } 
}

</script>
<body>
press keycode
</body>
</html>

キーコードの処理方法は、Mozilla/Opera系とIEで処理方法が違ってきます。違うのはキーコードの処理部分だけで、あとはどのキーが押されたかをチェックして処理を行うだけです。
サンプルでは、「Ctrl+C」、「Shift+C」、「C」のコードが押された際にalertでキーボードの該当のキーが押された旨を表示するようになっています。
処理したいキーコードを書き換えるだけで自由にキーボードショートカット等の機能を容易に実装できるでしょう。

尚、Firefoxの場合、IMEがOnになっていると同じキーコードしか打てなくなってしまう問題がありますので注意が必要です。

関連エントリ＆サイト

スポンサード リンク

投稿者 KJ : 2006年12月07日 07:04 | ブックマークに追加する Subscribe with livedoor Reader
間違いの指摘をしていただける方はメールでお願いします


本を執筆しました。