react - onkey events javascript

addEventListener para keydown en Canvas

Question

Estoy tratando de hacer una aplicación de lienzo que responda a la entrada del teclado y el mouse. Tengo este código:

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

La alerta ''mousedown'' aparece cada vez que hago clic en el mouse, pero la alerta ''keydown'' nunca aparece. El mismo código funciona bien en JS Bin: http://jsbin.com/uteha3/66/

¿Por qué no funciona en mi página? ¿El lienzo no reconoce la entrada del teclado?

Answer 1

Establezca el tabindex del elemento canvas en 1 o algo así

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

Es un viejo truco para hacer que cualquier elemento sea enfocable

Answer 2

Editar - Esta respuesta es una solución, pero un enfoque mucho más simple y adecuado sería establecer el atributo tabindex en el elemento canvas (como lo sugiere hobberwickey).

No puedes enfocar un elemento de lienzo. Un trabajo simple alrededor de esto, sería hacer su "propio" enfoque.

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