Fullscreen API and keyUp event

Question

I'm using Fullscreen API in Chrome and FF providing a button for the user to switch with code like this:

function initFullscreen() {
    $('#fullscreen').on('click', function(e) {
        requestFullscreen();
        $('#fullscreen').fadeOut();
    });
    $(document).keyup(function(e) {
        // esc
        if (e.keyCode == 27) { 
            $('#fullscreen').fadeIn();
        }   
    });
}

When in fullscreen mode the button disappears, but clicking ESC brings the button back only if I click ESC a second time when already in normal mode again.

Anyone with an idea why keyup handler is not triggered in fullscreen mode?

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

This does not really answer your specific question, but you could try another solution which should be even better than yours. There are other ways than ESC for exiting the fullscreen mode:

In addition, navigating to another page, changing tabs, or switching to another application (using, for example, Alt-Tab) while in fullscreen mode exits fullscreen mode as well.

— MDN: Using fullscreen mode

You should therefore listen to the official event:

Notification

When fullscreen mode is successfully engaged, the document which contains the document receives a mozfullscreenchange event. When fullscreen mode is exited, the document again receives a mozfullscreenchange event. Note that the mozfullscreenchange event doesn't provide any information itself as to whether the document is entering or exiting fullscreen mode, but if the document has a non null mozFullScreenElement, you know you're in fullscreen mode.

— MDN: Using fullscreen mode

Here is a list of vendor prefixes: https://stackoverflow.com/a/9775411/603003

score 0 · Answer 2 · answered Sep 19 '13 at 21:51

Well, removing the button was actually not the best idea. The following code works just fine to enter and leave fullscreen mode:

/* init fullscreen mode */
function initFullscreen() {
    $('#fullscreen').on('click', function(e) {
        toggleFullscreen();
    });
}

function toggleFullscreen() {
    if (!document.fullscreenElement &&    
        !document.mozFullScreenElement && !document.webkitFullscreenElement) {  
        if (document.documentElement.requestFullscreen) {
            document.documentElement.requestFullscreen();
        } else if (document.documentElement.mozRequestFullScreen) {
            document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullscreen) {
            document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
        $('#fullscreen').text('Leave Fullscreen');
    } 
    else {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
        $('#fullscreen').text('Fullscreen Mode');
    }
}

Works as well on Android.

Fullscreen API and keyUp event

2 Answers2

Notification