Catching keyboard input while fullscreen seems not to work
fullscreen, javascript, keyboard, three.js
Solution
THREEx.FullScreen seems to be using this code:
element.webkitRequestFullScreen();
And what you need is this:
element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
Seems like this is Chrome-only though.
Problem
I'm making a game with Three.js, and I need to get user input. I have two handler functions; ``` function press(evt) { console.log(evt); //evt = window.event; var code = evt.which || evt.keyCode; switch(code) { case KEY.W: input.up = true; break; case KEY.A: input.left = true; break; case KEY.S: input.down = true; break; case KEY.D: input.right = true; break; case KEY.E: input.e = true; break; case KEY.Z: input.z = true; break; case KEY.ONE: input.one = true; break; case KEY.CTRL: input.ctrl = true; break; case KEY.P: input.plus = true; break; case KEY.M: input.minus = true; break; case KEY.SH: input.shift = true; break; } } function release(evt) { console.log(evt); //evt = window.event; var code = evt.which || evt.keyCode; switch(code) { case KEY.W: input.up = false; break; case KEY.A: input.left = false; break; case KEY.S: input.down = false; break; case KEY.D: input.right = false; break; case KEY.E: input.e = false; break; case KEY.Z: input.z = false; break; case KEY.ONE: input.one = false; break; case KEY.CTRL: input.ctrl = false; break; case KEY.P: input.plus = false; break; case KEY.M: input.minus = false; break; case KEY.SH: input.shift = false; break; } } ``` Both of which I use in other projects, and they work fine. This is how I attach the event listeners: ``` document.addEventListener("keydown", press, false); document.addEventListener("keyup", release, false); ``` This works when the site normally loads, but does not work when the site goes fullscreen! This is the while setup in the init(); function which gets called on body `onload` event: ``` var init = function() { started = false; isFullscreen = false; changeFSState = function() { if (isFullscreen == true) { isFullscreen = false; game.stop(); //lol } else { isFullscreen = true; } } container = document.getElementById("container"); document.body.appendChild(container); document.addEventListener("keydown", press, false); document.addEventListener("keyup", release, false); document.addEventListener("webkitfullscreenchange", changeFSState, false); document.addEventListener("mozfullscreenchange", changeFSState, false); game = new Game(container); } ``` Once a `play` button is clicked, this happens: ``` THREEx.FullScreen.request(self.container); self.renderer.setSize(screen.width, screen.height); ``` Now, as I said, catching input works until I click the `play` button (a link, actually), and then the console simply stops logging the events, as if they weren't happening.