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?

May be related: http://stackoverflow.com/questions/10706070/how-to-detect-when-a-page-exits-fullscreen — Paul S., Aug 04 '14 at 19:34
@VenkatJanyavula ,I hope that this link is useful for you: http://stackoverflow.com/questions/20343309/how-to-fire-an-event-in-jquery-when-alttab-or-windowsd-is-pressed/20343513#20343513 — Majid Golshadi, Aug 05 '14 at 04:46

photicSphere · Answer 1 · 2017-10-23T19:17:35.190

69

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

edited Oct 23 '17 at 19:17

answered Jun 11 '16 at 01:53

photicSphere

811
6
7

1

Very useful !! it helped me !! – ilmk May 28 '19 at 07:12
Heads up: Maybe I'm seeing things, but when when Chrome dev tools is open, this fullscreen listener does not behave. With dev tools closed, I get expected correct behaviour. Context: In my web app, for testing I provide the user a button to open the app in fullscreen and visually, in template, I show state of both `document.fullscreenElement` and my own state tracking (e.g. a variable `enableFullscreen`). I get correct behaviour where both states match (ie "true true") when Chrome dev tools is closed, however with dev tools open, I get incorrect behaviour (ie "true false"). – Kalnode Aug 24 '23 at 20:19

score 7 · Answer 2 · answered Sep 12 '17 at 04:56

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

score -3 · Answer 3 · edited May 23 '17 at 10:29

-3

$(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?

edited May 23 '17 at 10:29

Community

1
1

answered Aug 05 '14 at 01:10

Mimetix

272
1
4
12

1

This simply doesn't work while "fullscreen mode" is enabled in Chrome. It works if you're out of "fullscreen mode" only. – Manny Aug 29 '18 at 17:32
`event.keyCode` is deprecated (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode). Don't use it anymore. Instead, you should be using `KeyboardEvent.code` (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code) – icfantv Feb 19 '21 at 15:26

Capture ESC event when exiting full screen mode

3 Answers3

Linked