Onkeydown event does not work in full-screen (F11) mode in Chrome

Asked

Viewed 241 times

4

I have a page that has a header. I would like when clicking the F11 button (which leaves the browser in Full Screen mode) the header to be hidden from the page and when I click again, the header would reappear on the page.

When I first click on the F11 key, everything happens perfectly, the page enters full screen mode already without the header. However, when I click the F11 key again, the page leaves full screen mode, but the header does not return to the page. If I press F11 again after that, the page enters full screen mode with the header.

That is, the event onkeydown is not working in full screen.

I made a simple example here that elucidates the situation I’m going through with my code (The so-called minimal, complete and verifiable example). Look at: 

<!DOCTYPE html>
<html lang="pt-BR">

<head>

</head>

<h1>Katie Bouman - Minha Namorada</h1>

<body>

  <script>
    document.onkeydown = function() {
      let codigo_unicode_tecla = event.keyCode;
      console.log(codigo_unicode_tecla);
      if (codigo_unicode_tecla == '122') {
        alert('Funcionou o click no F11');
      }
    }
  </script>

</body>

</html>

  • On my page, I simply check if the HTML element has the d-None class (from Bootstrap, which hides an element) at the moment of clicking the F11 key. If the element does not have such a class, then I add it with classList.add. If it does, I removed it with classList.remove. This is the dynamic of the code. Thanks in advance!
javascript google-chrome

  • Have you tried calling control+f11 or command+f11 and pass event by parameter in the function? document.onkeydown = function(event) { ... }

  • @Ivanferrer this is exactly the code of the question, the problem only occurs in Chrome. In Msedge and Firefox works normally.

  • It would not be better to make a button to call a function for these events instead of using the key, hence you can call this function with the key too, and nor need to worry about onkeydown event?

  • @Ivanferrer maybe he wants to detect independently of the form, just because there is no way to know what the user will use, the fullscreenchange event for example does not work with F11

  • 1

    Hello Schrödinger Cat, updated the answer, if you do not need to run in old browsers there is a @media (display-mode: fullscreen), it works both when it enters fullscreen with F11 and with requestFullscreen, I just passed by to warn you, so it will decrease your need for Javascript by being able to better control the style directly in CSS.

  • Thank you for the effort and for remembering, @Guilhermenascimento. I am grateful!

Show 1 more comment

1 answer

6


Detect the F11 with the event keydown is working perfectly in Firefox, apparently the fault occurs only in Google Chrome (and in Chromium-based browsers), although it has not found anything in Chromium/issues about the problem (I will search more and edit later if necessary).

I also noticed that the :fullscreen when the mode is initiated by the action of F11 does not work in any browser.

Fortunately the @media (display-mode: fullscreen) {} will work for both cases, Element.requestFullscreen() and F11

Example:

#cabecalho-superior {
    ... aplica estilo para quando NÃO estiver em fullscreen ...
}

@media all and (display-mode: fullscreen) {
    #cabecalho-superior {
        ... aplica estilo para quando estiver em fullscreen ...
    }
}

This media-query has support in the following browsers:

  • Chrome 45+
  • Edge 79+
  • Firefox 47+
  • Opera 32+
  • Safari 13+

As described in https://caniuse.com/? search=display-mode

If you happen to need support in older browsers then the only reasonable means with Javascript itself, like the F11 does not work well even with the :fullscreen and not even with the keydown (in Chrome) so the only reasonable means will be to use the event window.onresize (or with window.addEventListener('resize', ...)) and compare screen.width with window.innerWidth and screen.height with window.innerHeight, of course there are no guarantees on this, because depending on how the browser or operating system behaves it is possible that neither will have the same measures, in practice it would be something like:

window.addEventListener('resize', checarFullScreen);

function checarFullScreen()
{
     var cabecalho = document.getElementById('cabecalho-superior');

     if (screen.width == window.innerWidth && screen.height == window.innerHeight) {
         //Em fullscreen
         cabecalho.classList.add("d-none");
     } else {
         //Saindo do fullscreen
         cabecalho.classList.remove("d-none");
     }
}

Browser other questions tagged javascript google-chrome

You are not signed in. Login or sign up in order to post.