iframeを使用したキープレスでのデフォルトアクションのブロック

StackOverflow https://stackoverflow.com/questions/8389823

質問

これはキャッチ22です私は本当に解決する方法を理解することはできません。ホストするこのHTML5ゲームを受講してください：

http://www.scirra.com/arcade/action/93/8-ビット - ランナー - 警告には音がします！

ページはでホストされています scirra.com しかし、ゲームはiframeにあります static1.scirra.net セキュリティ上の理由から。

これで、ゲームをプレイしているときに左右を押して上下に押して、ウィンドウ全体が上下に左右にスクロールします。ゲームが焦点を合わせていない場合、防止デフォルトは正常に動作するようです。もちろん、ゲームをプレイするときにこのデフォルトのアクションを防ぎたいです！したがって、コードを使用します。

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

これを親ページとiframeページに配置します。 iframeが左右に焦点を合わせているときは、ブロックされているように見えますが、 up and down.

誰もがページのスクロールを停止する方法を解決するのを手伝ってくれますか？スペースバーをブロックすると、人々がテキストにスペースを追加できるようになります！

役に立ちましたか？

解決

私は問題を完全に理解していないかもしれませんが、あなたが望んでいるようです：

  1. 上、ダウン、スペースなど それだけ それが焦点があった場合にのみ、ゲームウィンドウに。
  2. 焦点が合っているときにコメントボックスに行くために、上、下、スペースなど。
  3. 上、下、スペースなど。メインウィンドウに焦点を合わせます。

番号＃2と＃3は、何もしないと自動的に起こることです。基本的に＃1が必要です。メインウィンドウにコードが必要な理由がわかりません。

これは、私のテストでChrome、Opera、FF、IE9、IE8、IE7で機能します。

メインウィンドウ

デモ： 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;
}

ゲームウィンドウ（iframe）

デモ： http://jsfiddle.net/thinkingstiff/dtmxy/

脚本：

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

    };

} );

他のヒント

あなたがそれを変更するときにそれが役立つかどうかを確認してくださいゲームdivをキャッチするだけです。

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

スペースバーの問題に関しては、ユーザーがゲームの下にコメントボックスに焦点を合わせた場合、キーダウン機能をチェックインする必要があります。焦点が合っている場合は、宇宙バーを一時的に許可します。

ゲームキャンバスを与えます tabindex. 。 0の値は、通常のソースベースのタブ順序にキャンバス要素を配置します。その後、フォーカスを受け取り、主要なイベントのターゲットとして機能することができます。つまり、カナバからのみ発信される主要なイベントのデフォルトアクションとイベントの伝播を防ぐことができます。

$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();
    }
});
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top