Bloccare l'azione predefinita su keyPress con iFrame

Question

Questa è una cattura 22 che non riesco davvero a capire come risolvere. Prendi questo gioco HTML5 che ospitiamo:

http://www.scirra.com/arcade/action/93/8-bits-runner - L'avvertimento ha un suono!

La pagina è ospitata su scirra.com Ma il gioco è in un iframe static1.scirra.net per motivi di sicurezza.

Ora se si preme a sinistra e a destra, su o giù quando si gioca l'intera finestra scorre su e giù, a sinistra e a destra. Il predefinito preveniente sembra funzionare bene quando il gioco non è concentrato. Vogliamo prevenire questa azione predefinita quando gioca ovviamente! Quindi usiamo il codice:

    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;
    });

Lo inseriamo sulla pagina principale e sulla pagina iFrame. Quando l'iframe ha la messa a fuoco sinistra e destra sembrano essere bloccati, ma non up and down.

Qualcuno può aiutarci a capire come fermare la pagina a scorrere e consentire comunque alle persone di digitare commenti nella casella dei commenti sotto il gioco? Se blocchi la barra spaziale impedisce alle persone di essere in grado di aggiungere spazi nel loro testo!

Answer 1

Potrei non capire appieno il problema, ma sembra che tu voglia:

1. su, giù, spazio, ecc. Per andare solo alla finestra del gioco solo quando questo ha attenzione.
2. su, giù, spazio, ecc. Per andare alla casella dei commenti quando questo ha attenzione.
3. su, giù, spazio, ecc. Per andare alla finestra principale quando questo ha attenzione.

Il numero 2 e #3 sono ciò che accade automaticamente se non fai nulla. Quindi fondamentalmente vuoi #1. Non vedo perché hai bisogno di un codice nella finestra principale.

Funziona in Chrome, Opera, FF, IE9, IE8, IE7 nei miei test.

Finestra principale

Demo: 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;
}

Finestra di gioco (iFrame)

Demo: http://jsfiddle.net/thinkingstiff/dtmxy/

Script:

$( 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

Vedi se aiuta quando lo cambi per catturare solo il Game Div.

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

Answer 3

Per quanto riguarda il problema della barra dello spazio devi controllare la funzione keydown se l'utente ha appena concentrato la casella di commento sotto il gioco. Se è focalizzato, consentire temporaneamente la barra spaziale.

Answer 4

Dai il tuo gioco Canvas a tabindex. Un valore di 0 metterà l'elemento tela nell'ordine di scheda basato su fonti normale. Sarà quindi in grado di ricevere concentrazione e agire come obiettivo di eventi chiave, il che significa che è possibile prevenire azioni predefinite e propagazione degli eventi per eventi chiave provenienti solo dai tuoi 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();
    }
});