JavaScript で Alt キーや Ctrl キーと同時に押されたキーを取得する

JS でキーイベント(Ctrl, Shift, Alt)をキャッチする

Web システムにおいて、キーボードによるアクセスキーが要件にあった場合の対応。

キーの同時押し

Ctrl キー, Alt キー, Shidt キー等の押下は、event でキャッチする。
その後、同時に押されたキーを判定する。

なお、やや冗長に見える書き方ではあるが、if 文を & で一行にまとめようとするとうまくいかなかった。

$(function ($) {

    $(window).keydown(function (e) {
        // Alt キーとの組み合わせをキャッチする。
        if (event.altKey) {
            if (e.keyCode == 13) {
                alert("Alt + Enter");
                return false;
            }
        }

        // Ctrl キーとの組み合わせをキャッチする。        
        if (event.ctrlKey) {
            if (e.keyCode == 13) {
                alert("Ctrl + Enter");
                return false;
            }
        }

        // Shift キーとの組み合わせをキャッチする。        
        if (event.shiftKey) {
            if (e.keyCode == 13) {
                alert("Shift + Enter");
                return false;
            }
        }        
    });

});

ブラウザのショートカットキーは無効化できない

なお、上記方法では、ブラウザのショートカットキーは無効化できない。
例えば、誤動作を防ぐ目的で「Ctrl + W (タブを閉じる)を無効化」といったことはできない。

同時押しするボタンのキーコード一覧

キーコードについては、こちらのサイトに詳細な情報がありました。参考までに。

キーコード一覧
https://web-designer.cman.jp/javascript_ref/keyboard/keycode/

このブログの人気の投稿

コピーした行の挿入が表示されない時はフィルタされていないかチェック

Excel で一部の図形だけ固定する