Prevent Esc Key from Exiting FullScreen App Mode on Website

Question

I'm developing a custom "lightbox" photo gallery. I'm adding key event "listeners" (left>prev, right>next, esc>close), and I'm having the issue of Safari (or any fullscreen mode browser) exiting fullscreen mode on escape. My site works fine, just the viewer then has to resume fullscreen mode for Safari (and others).

Now, I know there's a way to bypass this. Facebook for instance, while looking at a photo in the "theatre" mode, can be closed with the esc key without causing my browser to exit fullscreen.

Any thoughts?

Answer 1

Practically you cannot disable ESC key for browsers as that is a compromise for user to at least have some control over their browser. However, you do have a way to bind an eventlistener to your element field (say your lightbox div) to catch the Event when Esc is pressed and suppress it, like below: (so when people press ESC over the gallery div it will not exit browser fullscreen)

document.querySelector("div.lightbox").addEventListener("keydown",function(e){
    var charCode = e.charCode || e.keyCode || e.which;
    if (charCode == 27){
         alert("Escape is not suppressed for lightbox!");
        return false;
    }
});

Also many browsers toggle fullscreen mode with F11 key now.