web-dev-qa-db-ja.com

Canvasのキーダウン用のaddEventListener

キーボードとマウスの入力に応答するキャンバスアプリを作成しようとしています。私はこのコードを持っています：

canvas = document.getElementById('canvas');
canvas.addEventListener('mousedown', function(event) {
    alert('mousedown');
        }, false);
canvas.addEventListener('keydown', function(event) {
    alert('keydown');
        }, false);

「mousedown」アラートは、マウスをクリックするたびに表示されますが、「keydown」アラートは表示されません。同じコードがJS Binで正常に機能します： http://jsbin.com/uteha3/66/

ページ上で機能しないのはなぜですか？キャンバスはキーボード入力を認識しませんか？

javascripthtml5canvashtml5-canvas
47
Cbas

Edit-この回答は解決策ですが、はるかに単純で適切なアプローチはtabindexを設定することですcanvas要素の属性（hobberwickeyが示唆するとおり）。

キャンバス要素に焦点を合わせることができません。これを回避する簡単な方法は、「自分の」焦点を当てることです。

var lastDownTarget, canvas;
window.onload = function() {
    canvas = document.getElementById('canvas');

    document.addEventListener('mousedown', function(event) {
        lastDownTarget = event.target;
        alert('mousedown');
    }, false);

    document.addEventListener('keydown', function(event) {
        if(lastDownTarget == canvas) {
            alert('keydown');
        }
    }, false);
}

[〜＃〜] jsfiddle [〜＃〜]

51
Austin Brunkhorst

Canvas要素のtabindexを1またはこのようなものに設定します

<canvas tabindex='1'></canvas>

要素をフォーカス可能にするのは古いトリックです

99
hobberwickey