0

My iframe game is reading the keyboard including space, but on some browsers (Firefox, Safari) pressing Space also scrolls my page down, that causes my game to partially go out of screen. Sometimes it seems the page even scrolls back up when some other keys are pressed...

My game handles keypresses on "keyup" event.

input.addEventListener("keyup", function (e) {
//game handles all keys including space here
}

Because of using keyup event, this answer is not suitable to prevent space ; Pressing spacebar scrolls page down?

If I add this code, my game does not receive keyup events:

window.onkeydown = function(e) { 
  return !(e.keyCode == 32);
};

When I add this code above to parent html page, having ifreme, it only works if keyboard focus is clicked to parent html. When focus is inside iframe, the code does not work. It seems above code fixed issue for Safari!

Tom
  • 6,725
  • 24
  • 95
  • 159
  • Does this answer your question? [HTML prevent space bar from scrolling page](https://stackoverflow.com/questions/22559830/html-prevent-space-bar-from-scrolling-page) – Inch High Dec 09 '19 at 11:24
  • Thanks, the game is inside iframe, I added this code to parent html and it seems to work there IF keyboard focus is first clicked to parent html, outside of game. When the keyb focus is in inside the game, the code does not work – Tom Dec 09 '19 at 11:42
  • is the iframe with the same origin? – evgeni fotia Aug 28 '20 at 20:20
  • @Tom Can you provide a jsfiddle? – Jafar Akhondali Aug 28 '20 at 23:21

3 Answers3

1

You need preventDefault

window.addEventListener('keydown', (e) => {
  if (e.keyCode === 32) {
    e.preventDefault();
  }
});

See this codepen for a demo: https://codepen.io/xurei/pen/MWyveEp

xurei
  • 1,057
  • 8
  • 22
  • Thanks, yes this removes the space feature from browser, but problem is that I have iframe on this same page, now my content there inside iframe is no more able to receive space, it uses this code: window.onkeypress = akeyPress; window.onkeydown = akeyDown; window.onkeyup = akeyUp; – Tom Sep 01 '20 at 12:12
1

You have to find the right window object first

function getIframeWindow(iframe_object) {
  var doc;

  if (iframe_object.contentWindow) {
    return iframe_object.contentWindow;
  }

  if (iframe_object.window) {
    return iframe_object.window;
  } 

  if (!doc && iframe_object.contentDocument) {
    doc = iframe_object.contentDocument;
  } 

  if (!doc && iframe_object.document) {
    doc = iframe_object.document;
  }

  if (doc && doc.defaultView) {
   return doc.defaultView;
  }

  if (doc && doc.parentWindow) {
    return doc.parentWindow;
  }

  return undefined;
}

var myFrame = document.getElementById('targetFrame');
var frame_win = getIframeWindow(myFrame);

and then add the listeners to stop the spacebar event from bubbling up.

if (frame_win) {

  var preventSpace = (e) => {
      if (e.keyCode === 32) {
        e.preventDefault();
      }
    };

  frame_win.addEventListener('keydown', preventSpace);
  frame_win.addEventListener('keyup', preventSpace);
  frame_win.addEventListener('keypress', preventSpace);
}
Dominique Fortin
  • 2,212
  • 15
  • 20
1

The onkeypress event fires the browser scrolling. You can call preventDefault in this event, and the keyup and keydown events will continue to fire as intended.

window.onkeypress = function(e) { 
    if (e.keyCode == 32) {
        e.preventDefault();
    }
};

window.onkeyup = function(e) { 
  console.log("Space key up!")
};
Erick2280
  • 300
  • 3
  • 10