Attachment 476712 Details for Bug 264843 – Fullscreen based KeyboardLock API example

Fullscreen based KeyboardLock API example

Fullscreen-KeyboardLockAPI-Example.html (text/html), 3.02 KB, created by Byungseon(Sun) Shin on 2025-09-11 23:44:42 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Byungseon(Sun) Shin

Created: 2025-09-11 23:44:42 PDT

Size: 3.02 KB

patch

obsolete

><!DOCTYPE html>
><html lang="en">
><head>
>  <meta charset="UTF-8">
>  <title>Fullscreen KeyboardLock API Example</title>
>  <style>
>    /* Hide the text that is only relevant for fullscreen mode */
>    .fullscreen-text {
>      display: none;
>    }
>
>    /* Change the background color when in fullscreen mode */
>    :fullscreen {
>      background-color: lightblue;
>    }
>
>    /* Show the text that is only relevant for fullscreen mode */
>    :fullscreen .fullscreen-text {
>      display: block;
>    }
>
>    /* Hide the text that is only relevant for normal mode */
>    :fullscreen .normal-text {
>      display: none;
>    }
>  </style>
></head>
><body>
>  <div id="container">
>    <h1 class="normal-text">This is a normal mode</h1>
>    <h1 class="fullscreen-text">This is a fullscreen + keyboard lock mode</h1>
>  </div>
>  <button id="toggle">Toggle Fullscreen</button>
>  <script>
>    // Get the elements
>    let container = document.getElementById("container");
>    let button = document.getElementById("toggle");
>
>    // Add a click event listener to the button
>    button.addEventListener("click", function() {
>      // Check if fullscreen mode is available
>      if (document.fullscreenEnabled) {
>        // Check if we are already in fullscreen mode
>        if (document.fullscreenElement) {
>          // Exit fullscreen mode
>          document.exitFullscreen();
>        } else {
>          // Enter fullscreen mode with Keyboard Lock
>          //container.requestFullscreen(); 
>
>         container.requestFullscreen({ keyboardLock: "browser" })
>	     .then(function() {
>                 // Fullscreen mode activated
>                 console.log("in fullscreen mode");
>              })
>	     .catch((error) => {
>                 // If no, alert an error message
>                 alert("Error: " + error.message);
>             });
>        }
>      } else {
>        // Fullscreen mode is not available
>        alert("Fullscreen mode is not supported by your browser");
>      }
>    });
>
>    // Add a fullscreenchange event listener to the document
>    document.addEventListener("fullscreenchange", function() {
>      // Check if we are in fullscreen mode
>      if (document.fullscreenElement) {
>        // Update the button text
>        button.textContent = "Exit Fullscreen";
>        console.log("enter fullscreen");
>      } else {
>        // Update the button text
>        button.textContent = "Toggle Fullscreen";
>        console.log("exit fullscreen");
>      }
>    });
>
>    document.addEventListener("keydown", (e) => {
>      if (
>        (e.code === "Escape" ||
>          ((e.code === "KeyN" || e.code === "KeyT" || e.code == "Tab" || e.code == "KeyP"
>              || e.code == "KeyW" || e.code == "KeyQ"
>              || e.code == "Comma" || e.code == "Period"
>              || e.code == "BracketLeft" || e.code == "BracketRight"
>              || e.code == "ArrowLeft" || e.code == "ArrowRight" ) &&
>            (event.ctrlKey || event.metaKey)))
>      ) {
>	console.log("event got caught, so prevent default: " + e.code);
>        e.preventDefault();
>      }
>    });
>
>  </script>
></body>
></html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fullscreen KeyboardLock API Example</title>
  <style>
    /* Hide the text that is only relevant for fullscreen mode */
    .fullscreen-text {
      display: none;
    }

    /* Change the background color when in fullscreen mode */
    :fullscreen {
      background-color: lightblue;
    }

    /* Show the text that is only relevant for fullscreen mode */
    :fullscreen .fullscreen-text {
      display: block;
    }

    /* Hide the text that is only relevant for normal mode */
    :fullscreen .normal-text {
      display: none;
    }
  </style>
</head>
<body>
  <div id="container">
    <h1 class="normal-text">This is a normal mode</h1>
    <h1 class="fullscreen-text">This is a fullscreen + keyboard lock mode</h1>
  </div>
  <button id="toggle">Toggle Fullscreen</button>
  <script>
    // Get the elements
    let container = document.getElementById("container");
    let button = document.getElementById("toggle");

    // Add a click event listener to the button
    button.addEventListener("click", function() {
      // Check if fullscreen mode is available
      if (document.fullscreenEnabled) {
        // Check if we are already in fullscreen mode
        if (document.fullscreenElement) {
          // Exit fullscreen mode
          document.exitFullscreen();
        } else {
          // Enter fullscreen mode with Keyboard Lock
          //container.requestFullscreen(); 

         container.requestFullscreen({ keyboardLock: "browser" })
	     .then(function() {
                 // Fullscreen mode activated
                 console.log("in fullscreen mode");
              })
	     .catch((error) => {
                 // If no, alert an error message
                 alert("Error: " + error.message);
             });
        }
      } else {
        // Fullscreen mode is not available
        alert("Fullscreen mode is not supported by your browser");
      }
    });

    // Add a fullscreenchange event listener to the document
    document.addEventListener("fullscreenchange", function() {
      // Check if we are in fullscreen mode
      if (document.fullscreenElement) {
        // Update the button text
        button.textContent = "Exit Fullscreen";
        console.log("enter fullscreen");
      } else {
        // Update the button text
        button.textContent = "Toggle Fullscreen";
        console.log("exit fullscreen");
      }
    });

    document.addEventListener("keydown", (e) => {
      if (
        (e.code === "Escape" ||
          ((e.code === "KeyN" || e.code === "KeyT" || e.code == "Tab" || e.code == "KeyP"
              || e.code == "KeyW" || e.code == "KeyQ"
              || e.code == "Comma" || e.code == "Period"
              || e.code == "BracketLeft" || e.code == "BracketRight"
              || e.code == "ArrowLeft" || e.code == "ArrowRight" ) &&
            (event.ctrlKey || event.metaKey)))
      ) {
	console.log("event got caught, so prevent default: " + e.code);
        e.preventDefault();
      }
    });

  </script>
</body>
</html>

Actions: View

Attachments on bug 264843: 472108 | 476712