web-dev-qa-db-ja.com

JavaScriptでキー入力を検出する最も簡単な方法

Javascriptでゲームを作成するアイデアがあり（EaselJSで作成します）、キー入力を検出する必要があります。インターネットを見て回った後、多くの提案（window.onkeypressの使用、jQueryの使用など）を見てきましたが、ほとんどすべてのオプションについて反論があります。皆さんは何を提案しますか？これにjQueryを使用するのは簡単に聞こえますが、私はそのライブラリーの経験がほとんどないので（また、javascriptのベテランでもありません）、避けたいと思います。 jQueryが最適なオプションである場合、誰かがこれを行う方法の良い説明（説明は素晴らしい）を与えることができますか？

これはよく聞かれますが、明確な答えが見つかりませんでした。前もって感謝します！

javascriptjqueryhtml5keyboardeaseljs
52
bobismijnnaam

単純なJavaScriptを使用する場合、最も簡単なのは次のとおりです。

document.onkeypress = function (e) {
    e = e || window.event;
    // use e.keyCode
};

ただし、これを使用すると、イベントに対して1つのハンドラーしかバインドできません。

さらに、以下を使用して、複数のハンドラーを同じイベントに潜在的にバインドできます。

addEvent(document, "keypress", function (e) {
    e = e || window.event;
    // use e.keyCode
});

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + eventName, callback);
    } else {
        element["on" + eventName] = callback;
    }
}

いずれの場合も、keyCodeはブラウザ間で一貫性がないため、確認して把握する必要があるものがさらにあります。 e = e || window.eventに注意してください。これは、Internet Explorerの通常の問題で、イベントをコールバックに渡すのではなく、window.eventに入れます。

参照：

JQueryの場合：

$(document).on("keypress", function (e) {
    // use e.which
});

参照：

JQueryは「大きな」ライブラリである以外に、ブラウザ間の不一致、特にウィンドウイベントの不一致を本当に助けます。それは否定できません。あなたの例のために私が提供したjQueryコードが、はるかにエレガントで短く、しかもあなたが望むものを一貫した方法で達成していることは明らかです。 e（イベント）およびe.which（どのキーが押されたかを知るためのキーコード）が正確であることを信頼できるはずです。単純なJavascriptでは、jQueryライブラリが内部的に行うことをすべて行わない限り、知るのは少し難しくなります。

keydownとは異なるkeypressイベントがあることに注意してください。これらの詳細については、こちらをご覧ください。 onKeyPress対onKeyUpおよびonKeyDown

使用するものを提案することに関しては、フレームワークを学習するつもりならjQueryを使用することをお勧めします。同時に、Javascriptの構文、メソッド、機能、およびDOMと対話する方法を学ぶ必要があると思います。それがどのように機能し、何が起こっているのかを理解したら、jQueryをより快適に使用できるはずです。私にとって、jQueryは物事をより一貫させ、より簡潔にします。最後に、それはJavascriptであり、言語をラップします。

JQueryが非常に役立つもう1つの例は、AJAXを使用する場合です。ブラウザはAJAXリクエストの処理方法と一貫性がないため、jQueryは抽象化されているため、心配する必要はありません。

決定に役立つ可能性のあるものを次に示します。

72
Ian

キーを押す
（キーを入力してください）

バニラ：

document.addEventListener("keypress", function(event) {
    if (event.keyCode == 13) {
        alert('hi.')
    }
})

バニラ速記：

this.addEventListener('keypress', event => {
    if (event.keyCode == 13) {
        alert('hi.')
    }
})

jQuery：

$(this).on('keypress', function(event) {
    if (event.keyCode == 13) {
        alert('hi.')
    }
})

jQuery classic：

$(this).keypress(function(event) {
    if (event.keyCode == 13) {
        alert('hi.')
    }
})

jQueryの略記：

$(this).keypress((e) => {
    if (e.which == 13) {
        alert('hi.')
    }
})

さらに短く：

$(this).keypress(e=>
    e.which==13?
    alert('hi.'):null
)

デモ

21
Thielicious

event.keyと最新のJSを使用してください！

番号コードなし。 "Enter"、"ArrowLeft"、"r"、または任意のキー名を直接使用して、コードをさらに読みやすくすることができます。

document.addEventListener("keypress", function onEvent(event) {
    if (event.key === "ArrowLeft") {
        // Move Left
    }
    else if (event.key === "Enter") {
        // Open Menu...
    }
});

Mozilla Docs

サポートされているブラウザ

10
Gibolt

それを処理する方法はいくつかあります。バニラJavaScriptは非常にうまくできます。

function code(e) {
    e = e || window.event;
    return(e.keyCode || e.which);
}
window.onload = function(){
    document.onkeypress = function(e){
        var key = code(e);
        // do something with key
    };
};

または、より構造化された処理方法：

(function(d){
    var modern = (d.addEventListener), event = function(obj, evt, fn){
        if(modern) {
            obj.addEventListener(evt, fn, false);
        } else {
            obj.attachEvent("on" + evt, fn);
        }
    }, code = function(e){
        e = e || window.event;
        return(e.keyCode || e.which);
    }, init = function(){
        event(d, "keypress", function(e){
            var key = code(e);
            // do stuff with key here
        });
    };
    if(modern) {
        d.addEventListener("DOMContentLoaded", init, false);
    } else {
        d.attachEvent("onreadystatechange", function(){
            if(d.readyState === "complete") {
                init();
            }
        });
    }
})(document);
6
faino