CODEWITHSUNDEEP
javascripthtmleventsdom-events
Asta
Asta

Reputation: 107

Can't get keydown / keyup to work with pointer lock / fullscreen

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

Answers (1)

Tim Down
Tim Down

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

Related Questions