javascript - 同時に押されたキー

Question

Javascriptで同時に押されたキーの数を知ることはできますか?

もしそうなら、どうすればそれらの配列を持つことができkeyCodeますか?

Answer 1

keydown および keyup イベントをリッスンできます。

var keys = { length: 0 };

document.onkeydown = function(e){
    if(!keys[e.keyCode])   {
        keys[e.keyCode] = true;
        keys.length++;
    }
}

document.onkeyup = function(e){
    if(keys[e.keyCode])   {
        keys[e.keyCode] = false;
        keys.length--;
    }
}

true次に、現在押されているすべてのキーです。

@Esailja のおかげでフィドルのデモ: http://jsfiddle.net/maniator/Gc54D/

Answer 2

これでうまくいくはずです。これは Neal のものに似ていますが、ウィンドウを離れるバグや負の数のキーのバグなど、いくつかの問題を修正する必要があります。また、メッセージ作成コードを少し簡素化しました。キー数メッセージを書き込むためのタイマー ループをオンデマンド システムに置き換え、長さインデックスをデクリメントするための安全メカニズムを追加し、ユーザーがウィンドウを離れたときにすべてのキーをアップに切り替える clearKeys を追加しました。コードにはまだ 2 つのバグがあります。新しいウィンドウを開いて閉じた後も押し続けているキーは認識されず (キーを離して再度押す必要があります)、6 つ以上のキーを認識できません。 (これはこのコードに関連しているのではなく、コンピューター/ブラウザーに関係していると思われます...)。

var keys = {
    length: 0
};

window.onkeydown = function(e) {
    if (!keys[e.keyCode]) {
        keys[e.keyCode] = true;
        keys.length++;
        document.body.innerHTML = "You are pressing " + keys.length + " keys at the same time.";
    }
}

window.onkeyup = function(e) {
    if (keys[e.keyCode]) {
        keys[e.keyCode] = false;
        if (keys.length) {
            keys.length--;
        }
        document.body.innerHTML = "You are pressing " + keys.length + " keys at the same time.";
    }
}

function clearKeys() {
    for (n in keys) {
        n = false
    };
    keys.length = 0;
    document.body.innerHTML = "You are pressing " + 0 + " keys at the same time.";
}

document.body.innerHTML = "You are pressing 0 keys at the same time.";
window.onblur = clearKeys;

Answer 3

同時に押されたキーの数とキーコードの配列が必要なため、次の関数を使用することをお勧めします。

var getKeys = function () {
    var keys = [];

    window.addEventListener("blur", blur, false);
    window.addEventListener("keyup", keyup, false);
    window.addEventListener("keydown", keydown, false);

    return function () {
        return keys.slice(0);
    };

    function blur() {
        keys.length = 0;
    }

    function keyup(event) {
        var index = keys.indexOf(event.keyCode);
        if (index >= 0) keys.splice(index, 1);
    }

    function keydown(event) {
        var keyCode = event.keyCode;
        if (keys.indexOf(keyCode) < 0)
        keys.push(keyCode);
    }
}();

呼び出すgetKeysと、同時に押されたすべてのキーの配列が返されます。その配列のプロパティを使用lengthして、同時に押されたキーの数を見つけることができます。使用addEventListenerするため、ページ上の他のコードとも連携して動作します。

上記の関数をテストしたところ、キーを押したまま別のウィンドウに切り替えても、押された正しいキーが常に返されます (配列からそのキーが削除されます)。キーを押したまま元に戻すと、キーが押されたことを認識してアレイに押し込みます。したがって、上記のコードにバグがないことを証明できます。少なくとも、私がテストしたブラウザー (Opera 12.00) ではそうではありません。

同時に 8 つのキー ( A、S、D、F、J、K)Lを押すことができました;。同時に押すことができるのは左手キー 4 つと右手キー 4 つだけなので、この数は OS 固有のようです。たとえば、 、 、および を押しAてからS、D別Fの左手 (たとえばG) を押すと、最後のキーが認識されません。これはおそらく、OS が人間の入力方法を認識しているため、左右のキーのそれぞれに対して 4 つの割り込みしか許可しないためです。使用しているOSはUbuntu 12.04です。

このfiddleでコードの動作を確認できます。50 ミリ秒ごとに結果を表示する代わりに、デルタ タイマーを使用しました。また、次の回答setIntervalも読みたいと思うかもしれません。