Bloquear la acción predeterminada en KeyPress con iframe

Question

Esta es una captura 22 que realmente no puedo descubrir cómo resolver. Tome este juego HTML5 que organizamos:

http://www.scirra.com/arcade/action/93/8-bits-runner - ¡La advertencia tiene sonido!

La página está alojada en scirra.com Pero el juego está en un iframe en static1.scirra.net por razones de seguridad.

Ahora, si presiona hacia la izquierda y la derecha, hacia arriba o hacia abajo cuando juegas al juego, toda la ventana se desplaza hacia arriba y hacia abajo, hacia la izquierda y la derecha. El predeterminado PREVE parece funcionar bien cuando el juego no está enfocado. ¡Queremos evitar esta acción predeterminada al jugar el juego, por supuesto! Entonces usamos el código:

    var ar = new Array(32, 33, 34, 35, 36, 37, 38, 39, 40, 44);
    $(document).keydown(function (e) {            
        var key = e.which;
        if ($.inArray(key, ar) > -1) {
                e.preventDefault();
                return false;
        }
        return true;
    });

Pusimos esto en la página principal y la página de iframe. Cuando el iframe tiene enfoque a la izquierda y a la derecha, parece estar bloqueado, pero no up and down.

¿Alguien puede ayudarnos a resolver cómo detener el desplazamiento de la página y aún permitir que las personas escriban comentarios en el cuadro de comentarios debajo del juego? ¡Si bloquea la barra espacial, deja de que las personas puedan agregar espacios en su texto!

Answer 1

Puede que no entiendo completamente el problema, pero parece que quieres:

1. arriba, abajo, espacio, etc. para ir solamente a la ventana del juego solo cuando eso tiene enfoque.
2. arriba, abajo, espacio, etc. para ir al cuadro de comentarios cuando eso tenga enfoque.
3. arriba, abajo, espacio, etc. para ir a la ventana principal cuando eso tenga enfoque.

El número #2 y #3 son lo que sucede automáticamente si no hace nada. Así que básicamente quieres #1. No veo por qué necesita ningún código en la ventana principal.

Esto funciona en Chrome, Opera, FF, IE9, IE8, IE7 en mis pruebas.

Ventana principal

Manifestación: http://jsfiddle.net/thinkingstiff/dp5vk/

HTML:

<iframe id="game" src="http://jsfiddle.net/ThinkingStiff/dtmxy/show/"></iframe>
<textarea id="comment-box"></textarea>

CSS:

#game {
    border: 1px solid red;
    display: block;
    height: 100px;
    width: 200px;
}

#comment-box {
    height: 100px;
    width: 200px;
}

body {
    height: 1000px;
    width: 1000px;
}

Ventana de juego (iframe)

Manifestación: http://jsfiddle.net/thinkingstiff/dtmxy/

Guion:

$( document ).bind( 'keydown', function ( event ) {

    var keys = [32, 33, 34, 35, 36, 37, 38, 39, 40, 44];

    if( keys.indexOf( event.which ) > -1 ) {

        event.preventDefault();
        event.stopPropagation();

    };

} );

Answer 2

Vea si ayuda cuando lo cambias solo para atrapar el juego Div.

$('div.arcade-content').on('keydown', 'div.game-wrapper', function (e) {
    ...
});

Answer 3

Con respecto al problema de la barra espacial, debe verificar su función de tecla si el usuario acaba de enfocar el cuadro de comentarios debajo del juego. Si está enfocado, permita la barra espaciadora temporalmente.

Answer 4

Dale un lienzo de juego un tabindex. Un valor de 0 colocará el elemento Canvas en el orden de pestaña basado en la fuente regular. Luego podrá recibir el enfoque y actuar como el objetivo de los eventos clave, lo que significa que puede prevenir acciones predeterminadas y propagación de eventos para eventos clave que se originan solo en sus Canavas.

$canvas = $("#c2canvas");
$canvas.tabIndex = 0;

var ar = [32, 33, 34, 35, 36, 37, 38, 39, 40, 44];
$canvas.keydown(function (e) {            
    var key = e.which;
    if ($.inArray(key, ar) > -1) {
        e.preventDefault();
        e.stopPropagation();
    }
});