¿Cómo le doy a un lienzo HTML el foco del teclado usando jquery?

Question

Estoy implementando un juego usando Javascript, jquery y la etiqueta de Canvas. ¿Cómo puedo evitar que el navegador procese accesos directos de teclado cuando la etiqueta canvas tiene el foco? He intentado event.stopPropagation() y no tiene ningún efecto.

Puedo recoger eventos de teclado. Sin embargo, cuando el usuario presiona la barra espaciadora, la página web se desplaza hacia abajo en Firefox. Lo mismo ocurre con las teclas de flecha.

Answer 1

Probar event.preventDefault();. También hay eventos keypress, keydown y keyup ... puedes probar cada uno de ellos para ver qué funciona.

Answer 2

El problema de raíz es que, de forma predeterminada, el navegador no hace que el lienzo sea "enfocable". La mejor solución que podía llegar a es fijar el tabindex en el lienzo:

$("#canvas") 
    // Add tab index to ensure the canvas retains focus 
    .attr("tabindex", "0") 
    // Mouse down override to prevent default browser controls from appearing 
    .mousedown(function(){ $(this).focus(); return false; }) 
    .keydown(function(){ /* ... game logic ... */ return false; }); 

Si por cualquier razón no se puede establecer la tabindex, también puede hacer que el lienzo "enfocable" mediante el establecimiento de cierto contentEditable :

// Add content editable to help ensure the canvas retains focus 
$("#canvas").attr("contentEditable", "true") 
$("#canvas")[0].contentEditable = true; 

Esta es la solución que se me ocurrió en un principio, pero en mi opinión es un poco hackier que la opción tabindex.

Otra cosa a considerar es que los navegadores tienden a delinear elementos editables de contenido con un borde. Esto puede ser desagradable para algunos usuarios. Afortunadamente, usted puede deshacerse de él con este poco de css:

#canvas { outline: none; } 

He probado ambas soluciones en Chrome y Firefox 3/4/5 3.0/3.5/3.6 en Windows XP, Mac OS X y Linux. Aquí hay un ejemplo de trabajo: http://xavi.co/static/so-canvas-keyboard.html