クロスブラウザでのJavaScriptキーボードイベントの扱い方:phpspot開発日誌

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

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

2006年12月07日-

スポンサードリンク

[PR]　英単語を忘却曲線アプリを使って超効率よく記憶する方法

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

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

以下、サンプル。

<html>
<title>クロスブラウザでキーボードイベントを処理する方法</title>

<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になっていると同じキーコードしか打てなくなってしまう問題がありますので注意が必要です。

関連エントリ＆サイト

関連の記事検索：JavaScript, チュートリアル, キーボード, プログラミング

スポンサードリンク

By.KJ : 2006年12月07日 07:04

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)