javascript でキーの押下を検出する

カテゴリ:programming

簡単なのは document.onkeydown をそのまま使う方法だ.

document.onkeydown = function (e) {
  var keys = {
    65/*a*/: function () {
      // 何らかの処理
    },
    68/*d*/: function () {
    },
    87/*w*/: function () {
    },
    83/*s*/: function () {
    }
  }
  if (typeof keys[e.keyCode] != 'undefined') {
      keys[e.keyCode]();
  }
}

しかしこの方法は,一度押下したあと連続入力されるまでに間がある.

キーの状態を管理する

キーのテーブルを作成し,onkeydown と onkeyup とでキーの状態を管理する. 解説は キーボードが押しっぱなしか調べる を参照.コードにすると以下のようになる.

var keyTable = new Array();
var keyBind = [65, 68, 83, 87];
var keyActions = {
  0/*left*/: function () {
    // 処理
  },
  1/*right*/: function () {
  },
  2/*down*/: function () {
  },
  3/*up*/: function () {
  }
};


document.onkeydown = function (e) {
  keyTable[e.keyCode] = true;
}
document.onkeyup = function (e) {
  keyTable[e.keyCode] = false;
}
window.onblur = function (e) {
  keyTable.length = 0;
}

function exec(){
  for (var i = 0; i < keyBind.length; ++i) {
    if (keyTable[keyBind[i]]) {
        keyActions[i]();
    }
  }
}

関連記事

ブラウザごとのキーコード表