How do I prevent arrow keys from scrolling the page when my game is in an iframe?

0 favourites
  • 3 posts
From the Asset Store
Game with complete Source-Code (Construct 3 / .c3p) + HTML5 Exported.
  • I have been banging my head against this all afternoon. I was going to reply to the other threads on this but they are so old it wouldnt let me.

    I went as far as to create a blank project with only a Square with "Tile Movement" behaviour & Default Controls enables (Arrow Keys).

    The end result is no matter what I try, when the iFrame is in focus, the keyboard arrows control the browser's scrolling.

    Check this URL:

    I tried adding some code:

    window.addEventListener("keydown", function(e) { // space and arrow keys if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) { e.preventDefault(); } }, false);

    to preventDefault on the arrow keys both to the Parent page, and the iframe's index.html, but the best i can do seems to be that i can prevent scrolling on the main parent page. As soon as I click the iframe to control the square, the arrow keys go back to scrolling the page.

    Clicking outside the iframe back on the arrow keys will prevent them from scrolling again.

    Anyone have this solved already? I'd be so grateful for your advice / solution!

  • Updated the URL so it points to the parent page with the iframe.

    Also I tried adding a keyboard object and setting "Blank" events for the "On Key Pressed -> Up Arrow, etc" and it didnt seem to make a difference. Same issue: arrow keys scroll the page once the iframe is in focus.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • and I donno wth, i swear i tried this before but maybe caching was messing with it... This is all I had to do:

    Open the IFRAME's index.html (ie the games exported index.html) and add this to the head, between some script tags:

    window.addEventListener("keydown", function(e) { if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) { e.preventDefault(); } }, false);

    That seemed to solve it!

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)