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 full

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.