js

テキストエリアでキーの同時押しを判定する方法



テキストエリアでキーを同時押し際に何を同時押しされたかの判定を行う方法。
前回の記事「テキストエリアでタブを入力できるようにする」と似た方法となります。

サンプル&コード

簡単解説

下記のハイライトになっている箇所がキーとなります。
以下がonkeydownイベントでCtrlキー,Altキー,Shiftキーが押させれている時にtrueとなります。
キー
e.ctrlkeyCtrlキー
e.metaKeyWindows:Ctrlキー
Mac:Command
e.altKey Altキー
e.shiftKey Shiftキー
jQuery(function($){
    $("textarea")
    // フォーカス時の設定
    .focus(function(){
        window.document.onkeydown = function(e){
            // e.which = 83 = s
            if ((e.ctrlKey || e.metaKey) && e.which == 83) {
                // e.ctrlkey = Ctrl
                // e.metaKey = Mac: Command or Windows: Ctrl
                $("#log_content").after("<p>Ctrl + S</p>")
                e.preventDefault();
            }else if (e.altKey && e.which == 83) {
                // e.altkey = Alt
                $("#log_content").after("<p>Alt + S</p>")
                e.preventDefault();
            }else if (e.shiftKey && e.which == 83) {
                // e.shiftKey = Shift
                $("#log_content").after("<p>Shift + S</p>")
                e.preventDefault();
            }
        }
    })
    // フォーカスが外れた時の設定
    .blur(function(){
        // 通常の動作を行うように再設定
        window.document.onkeydown = function(e){
            return true;
        }
    });
});



コメントを残す