使用iframe阻止对按键的默认操作 [英] Blocking default action on keypress with iframe

问题描述

这是一个问题22我无法弄清楚如何解决。以我们主持的这款HTML5游戏：

This is a catch 22 I can't really figure out how to resolve. Take this HTML5 game we host:

http://www.scirra.com/arcade/action/93/8-bits-runner - 警告有声！

该页面托管于 scirra.com 但出于安全原因，该游戏位于 static1.scirra.net 上的iframe中。

The page is hosted on scirra.com but the game is in an iframe on static1.scirra.net for security reasons.

现在如果你在玩游戏时向左或向右，向上或向下按，整个窗口会上下左右滚动。当游戏没有集中时，防止默认似乎工作正常。当然，我们希望在玩游戏时防止此默认操作！所以我们使用代码：

Now if you press left and right, up or down when you are playing the game the entire window scrolls up and down, left and right. The prevent default seems to work OK when the game isn't focused. We want to prevent this default action when playing the game of course! So we use the 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;
    });

我们把它放在父页面和iframe页面上。当iframe左右焦点似乎被阻止，但上下。

We put this on the parent page and the iframe page. When the iframe has focus left and right seem to be blocked, but not up and down.

任何人都可以帮助我们弄清楚如何停止页面滚动，并且仍允许人们在游戏下方的评论框中输入评论？如果你阻止空格键，它会阻止人们在文本中添加空格！

Can anyone help us work out how to stop the page scrolling, AND still allow people to type comments in the comment box below the game? If you block space bar it stops people being able to add spaces in their text!

推荐答案

我可能不完全理解这个问题，但似乎你想要：

I may not fully understand the problem, but it seems like you want:

1. 向上，向下，空格等等，以 来游戏仅当焦点有焦点时才会显示窗口。


2. 向上，向下，空格等，以便在有焦点时转到评论框。


3. up，当有焦点时，向下，空间等进入主窗口。

1. up, down, space, etc. to go only to the game window only when that has focus.
2. up, down, space, etc. to go to the comment box when that has focus.
3. up, down, space, etc. to go to the main window when that has focus.

数字＃2和＃3是自动发生的事情如果你什么都不做所以基本上你想要＃1。我不明白为什么你需要在主窗口上有任何代码。

Number #2 and #3 are what happen automatically if you do nothing. So basically you want #1. I don't see why you need any code on the main window.

这在我的测试中适用于Chrome，Opera，FF，IE9，IE8，IE7。

This works in Chrome, Opera, FF, IE9, IE8, IE7 in my tests.

演示： 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();

    };

} );

这篇关于使用iframe阻止对按键的默认操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！