Reputation: 107
My problem is that I recently started to change my HTML5 webapp to use fullscreen + pointer lock instead of dragging the mouse in the window. The app uses keyboard in addition to mouse, and everything was working fine previously. However, now I can't get any kind of keypresses to work. Pointer locked mouse works perfectly.
Previously I listened to keypresses like this:
document.onkeydown = handleKeyDown;
document.onkeyup = handleKeyUp;
where handleKeyDown
and Up are functions, for example:
function handleKeyUp(event) {
doStuffWith(event.keyCode);
}
Now, I have added keyboard listeners right next to my mousemove
listener:
document.addEventListener('keyup', handleKeyUp(event), false);
document.addEventListener('keydown', handleKeyDown(event), false);
where handleKey
* are the same as above, but doStuffWith
doesn't do anything. It seems to get some undefined events and nothing else. This is probably a fairly elementary problem, but I have a hard time solving it. Most examples and tutorials I found with Google don't use addEventListener
but instead the old style like I used previously.
I am very grateful for any help.
edit // A clarification: since events are undefined, doStuffWith
doesn't get called at all, because the execution stops when trying to read .keyCode
of undefined
Upvotes: 0
Views: 2226
Reputation: 324687
The main problem is that, according to the following MDN page, alphanumeric keys are disabled in full-screen mode:
https://developer.mozilla.org/en/DOM/Using_full-screen_mode#Things_your_users_want_to_know
There are also a couple of issues with your code. In the the line
document.addEventListener('keyup', handleKeyUp(event), false);
... you have two problems: first, the second parameter need to be a reference to a function. It's actually a reference to undefined
because you're calling the function immediately and passing in the result rather than passing in a function. Second, in browsers that support addEventListener
, the Event
object is automatically passed into the event listener function. What you want, therefore, is:
function handleKeyUp(e) {
doStuffWith(e.keyCode);
}
document.addEventListener('keyup', handleKeyUp, false);
Upvotes: 1