Capture ESC event when exiting full screen mode

Question

Requirement for me I have to show a particular div in full screen mode when I press a button and hide that div when the page comes back to normal mode.

I am able to achieve full screen mode with the code :-

function launchFullscreen(element) {
    if (element.requestFullscreen) {
        $('#bmessages').show();
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
        $('#bmessages').show();
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
        $('#bmessages').show();
        element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
        $('#bmessages').show();
        element.msRequestFullscreen();
    } else {
        console.log("Fullscreen Unavailable");
    }
}

But I am unable to capture ESC or Deny event so that I can again hide that div? Please advice what I have to do?

Answer 1

Chrome does not fire a key event when using esc to leave fullscreen. However, a fullscreenchange event IS fired.

document.addEventListener('fullscreenchange', exitHandler);
document.addEventListener('webkitfullscreenchange', exitHandler);
document.addEventListener('mozfullscreenchange', exitHandler);
document.addEventListener('MSFullscreenChange', exitHandler);

function exitHandler() {
    if (!document.fullscreenElement && !document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
        ///fire your event
    }
}  

Answer 2

As photicSphere points out, Chrome will not fire a key event when exiting full screen mode. You need to define an event listener that listens for a change to full screen mode, like this (this stuff isn't well standardised, so you need to listen for the events fired by different browsers):

        if (document.addEventListener) {
            document.addEventListener('webkitfullscreenchange', exitHandler, false);
            document.addEventListener('mozfullscreenchange', exitHandler, false);
            document.addEventListener('fullscreenchange', exitHandler, false);
            document.addEventListener('MSFullscreenChange', exitHandler, false);
        }

Then, when this event is fired by the browser, it will call an 'exitHandler' function that you define, and you can perform an action when the user is exiting full screen mode by doing the following:

    function exitHandler() {
        if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
            ... do something here
        }
    }