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

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

$(document).keyup(function(e) {

  if (e.keyCode == 27) { <DO YOUR WORK HERE> }   // esc
});

U may find this useful: How to detect escape key press with JavaScript?

Answer 3

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
        }
    }