12

I have a custom video play with it's own controls. I have a script to make changes to the controls when the user enters and exists full screen. The problem is that when I exit fulls creen using the ESC key instead of the button, the style changes to the controls are not reverted back. I need to ensure that exiting full screen using ESC or button will result in the same behaviour.

CSS:

function toggleFullScreen() {
  
  elem = document.getElementById("video_container");
  var db = document.getElementById("defaultBar"); 
  var ctrl = document.getElementById("controls");
  
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
    if (document.documentElement.requestFullscreen) {
          
          ctrl.style.width = '50%';
          ctrl.style.left = '25%';
          full.firstChild.src = ('images/icons/unfull.png');
          elem.requestFullscreen();          
        } else if (document.documentElement.mozRequestFullScreen) {
          full.firstChild.src = 'images/icons/unfull.png';
          ctrl.style.width = '50%';
          ctrl.style.left = '25%';
          elem.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullscreen) {
          
          ctrl.style.width = '50%';
          ctrl.style.left = '25%';
          full.firstChild.src = 'images/icons/unfull.png';
          elem.webkitRequestFullscreen();
          
        }
  } else if (document.exitFullscreen) {
        full.firstChild.src = 'images/icons/full.png';
        ctrl.style.width = '100%';
        ctrl.style.left = '0';        
        document.exitFullscreen();
        }
        else if (document.mozCancelFullScreen) {
        full.firstChild.src = 'images/icons/full.png';
        ctrl.style.width = '100%';
        ctrl.style.left = '0'; 
        document.mozCancelFullScreen();
        }
        else if (document.webkitCancelFullScreen) {
       
        ctrl.style.width = '100%';
        ctrl.style.left = '0';
        full.firstChild.src = 'images/icons/full.png';
        document.webkitCancelFullScreen();
        } 
}
3
  • 1
    How does this question involve Java? Feb 17, 2013 at 19:20
  • I thought the syntax may be similar enough for someone with Java experience to help. Sorry if I was wrong.
    – Batman
    Feb 17, 2013 at 21:13
  • 1
    Yeah, you'll not want to make that assumption since while both languages' syntax share C language roots, the languages are otherwise completely different. Good luck with your problem. Feb 17, 2013 at 23:31

2 Answers 2

26

event.key === "Escape"

More recent and much cleaner: use event.key. No more arbitrary number codes!

document.addEventListener("keydown", function(event) {
    const key = event.key; // Or const {key} = event; in ES6+
    if (key === "Escape") {
        // Do things
    }
});

Modern style, with lambda and destructuring

document.addEventListener("keydown", ({key}) => {
    if (key === "Escape") // Do things
})

Mozilla Docs

Supported Browsers

2
  • 3
    I'm curious why "keypress" event does not work but "keydown" does.
    – Jarad
    Jan 26, 2023 at 2:04
  • @Jarad this is how I came to find this, I was also trying to bind to keypress.
    – lharby
    Oct 4, 2023 at 7:53
8

Edit: This answer is outdated. For modern browsers, @Gibolt's answer is better. If you need to support IE11, you can fallback to the legacy event.keyCode. See this article for more details.

It sounds like you want to attach a keypress event to the document. Something like this ought to do the trick.

document.onkeypress = function(evt) {
    evt = evt || window.event;
    if (evt.keyCode == 27) {
        alert("Esc was pressed");
    }
};

For more info, check out this article

2
  • do you think adding document.onkeypress.keycode==27 as an OR condition in the exit fullscreen statements would solve my problem?
    – Batman
    Feb 17, 2013 at 21:13
  • 3
    note that window.event and evt.keyCode have been deprecated. Use KeyboardEvent.key as suggested by Gibolt below. May 17, 2020 at 18:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.