Capturing an ESC event when exiting full screen mode

Question

Requirement for me I have to show a specific div in full screen mode when I click the button and hide this div when the page returns to normal mode.

I can achieve full screen mode with 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 can not capture the ESC or Deny event to hide this div again? Please advise what should I do?

Answer 1

Chrome does not fire a key event when using esc to exit full screen mode. However, the fullscreenchange IS 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 using JavaScript?

Answer 3

As photicSphere notes, Chrome does not fire a key event when exiting full-screen mode. You need to define an event listener that listens for the change in full-screen mode, for example (this material is not very standardized, so you need to listen to events triggered 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 is called by the "exitHandler" function that you define, and you can perform the action when the user exits full-screen mode by doing the following:

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