Standardaktion bei Tastendruck mit iframe blockieren

Question

Das ist eine Zwickmühle, für die ich keine Lösung finden kann. Nehmen Sie dieses HTML5-Spiel, das wir hosten:

http://www.scirra.com/arcade/action/93/8-bits-runner - Warnung hat Ton!

Die Seite wird gehostet auf scirra.com aber das Spiel befindet sich in einem iframe auf static1.scirra.net aus Sicherheitsgründen.

Wenn Sie jetzt während des Spiels die Tasten links und rechts, oben oder unten drücken, wird das gesamte Fenster nach oben und unten, links und rechts verschoben. Die Voreinstellung "Verhindern" scheint gut zu funktionieren, wenn das Spiel nicht fokussiert ist. Wir wollen diese Standardaktion natürlich verhindern, wenn wir das Spiel spielen! Also benutzen wir den Code:

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

Dies wird auf der übergeordneten Seite und auf der Iframe-Seite eingefügt. Wenn der Iframe den Fokus hat, scheinen links und rechts blockiert zu sein, aber nicht up and down .

Kann uns jemand dabei helfen, das Scrollen der Seite zu stoppen und trotzdem Kommentare in das Kommentarfeld unter dem Spiel zu schreiben? Wenn Sie die Leertaste blockieren, können die Leute keine Leerzeichen in ihren Text einfügen!

Answer 1

Ich verstehe das Problem vielleicht nicht ganz, aber es scheint, als wollten Sie es:

1. nach oben, unten, Leertaste usw. zu gehen nur für das Spielfenster nur, wenn dieses den Fokus hat.
2. Auf, Ab, Leertaste usw., um zum Kommentarfeld zu gelangen, wenn dieses den Fokus hat.
3. auf, ab, Leertaste usw., um zum Hauptfenster zu gelangen, wenn dieses den Fokus hat.

Nummer 2 und Nummer 3 passieren automatisch, wenn Sie nichts tun. Im Grunde wollen Sie also Nummer 1. Ich sehe nicht, warum Sie irgendeinen Code im Hauptfenster brauchen.

In meinen Tests funktioniert dies in Chrome, Opera, FF, IE9, IE8 und IE7.

Hauptfenster

Demo: http://jsfidd

H

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

C

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

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

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

G

Demo: h

S

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

Schauen Sie, ob es hilft, wenn Sie es so ändern, dass es nur auf dem Spiel-Div fängt.

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

Answer 3

Was das Problem mit der Leertaste betrifft, so müssen Sie in Ihrer Keydown-Funktion prüfen, ob der Benutzer das Kommentarfeld unter dem Spiel gerade fokussiert hat. Wenn es fokussiert ist, dann lassen Sie die Leertaste vorübergehend zu.

Answer 4

Geben Sie Ihrer Spielleinwand eine tabindex . Bei einem Wert von 0 wird das Canvas-Element in die normale quellenbasierte Tabulatorreihenfolge gebracht. Es ist dann in der Lage, den Fokus zu erhalten und als Ziel von Schlüsselereignissen zu fungieren, d. h. Sie können Standardaktionen und die Ereignisweiterleitung für Schlüsselereignisse verhindern, die nur von Ihren Canvas stammen.

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