0

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

1 Answer 1

1

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);
5
  • Thanks, I knew there was something like that! Unfortunately, it doesn't solve the problem. Listeners seem to work well for non-fullscreen, but in the fullscreen the only key event that happens according to logs is when esc goes up, ie just after the fullscreen is exited.
    – Asta
    Apr 2, 2012 at 7:22
  • @Asta: OK. I know almost nothing about working with full screen and pointer lock, so I'm probably not able to help much further, except to provide this link which mentions that alphanumeric keys are disabled in full screen mode: developer.mozilla.org/en/DOM/…
    – Tim Down
    Apr 2, 2012 at 8:12
  • Thanks, that was the reason! I tried only alphanumeric (since that's what the app uses). Arrow keys work fine. Can't say I really understand this decision, though, because most FPS's use wasd and numbers. Do you mind making an answer with that info, so I can accept it?
    – Asta
    Apr 2, 2012 at 8:32
  • @Asta: Done, I updated my existing answer. The reasoning mentioned on the MDN (guarding against phishing attacks) makes some sense to me, although I fully agree that it's completely counter-productive for gaming.
    – Tim Down
    Apr 2, 2012 at 10:11
  • I did some Googling, and it seems that a fullscreen mode with the full keyboard support is planned/coming. At the moment Mozilla seems to support requestFullScreenWithKeys() method and Webkit webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT) method. I haven't verified either, though.
    – Asta
    Apr 2, 2012 at 12:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.