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

- Warning has sound!

The page is hosted on scirra but the game is in an iframe on static1.scirra 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;
    });

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 ments in the ment box below the game? If you block space bar it stops people being able to add spaces in their text!

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

http://www.scirra./arcade/action/93/8-bits-runner - Warning has sound!

The page is hosted on scirra. but the game is in an iframe on static1.scirra 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;
    });

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 ments in the ment box below the game? If you block space bar it stops people being able to add spaces in their text!

• javascript
• jquery
• html
• iframe
• preventdefault

5 Answers 5

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

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 ment box when that has focus.
3. up, down, space, etc. to go to the main window when that has focus.

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.

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

Main Window

Demo: http://jsfiddle/ThinkingStiff/Dp5vK/

HTML:

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

CSS:

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

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

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

Game Window (iframe)

Demo: http://jsfiddle/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();

    };

} );

See if it helps when you change it to only catch on the game div.

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

Concerning the space bar issue you have to check in your keydown function if the user just focused the ment box below the game. If it is focused, then allow spacebar temporarily.

Give your game canvas a tabindex. A value of 0 will put the canvas element in the regular source-based tab order. It will then be able to receive focus and act as the target of key events, meaning you can prevent default actions and event propagation for key events originating from your canavas only.

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

I had the same issue embedding my game in iframe into a Wordpress content page. Sadly the solutions above doesn't work with preventDefault() and stopPropagation() of keydown keyCodes. So I solved it with a css class toggling to body overflow: hidden and set / unset the iframe focus by keydown or page scroll by mousewheel.

document.addEventListener('keydown', function(e) {
  document.body.classList.add('no-scroll');
  document.getElementsByTagName('iframe')[0].focus();
});
document.addEventListener('wheel', function(e) {
    document.body.classList.remove('no-scroll');
    if (document.activeElement) {
        document.activeElement.blur();
    }
});

.no-scroll {
    overflow: hidden;
}

Here is the working exemplar: Boulder Dash