FullScreenGrabKeyboard.user.js

// ==UserScript==
// @name         FullScreen grab keyboard.
// @version      0.1
// @description  Let the html page get exclusive access to the keyboard when in full screen. This is handy for games or remote desktop.
// @match        http://PUT_YOUR_WEBSITE_HERE/*
// @grant        none
// @noframes
// @author       toff
// ==/UserScript==

// Only compatible with chrome base browser at the moment.

// see https://wicg.github.io/keyboard-lock/
// see https://chromestatus.com/feature/5642959835889664
// see https://developer.mozilla.org/en-US/docs/Web/API/Keyboard/lock
// see https://github.com/WICG/keyboard-lock

(function() {
    'use strict';

    // Create a button to go full screen.
    let fsButtonElem = document.createElement("input");
    fsButtonElem.type = "button";
    fsButtonElem.value = "fs";
    fsButtonElem.style.position = "absolute";
    fsButtonElem.style.top = "20px";
    fsButtonElem.style.left = "20px";
    fsButtonElem.style.opacity = "50%";
    fsButtonElem.style.padding = "1px 3px";
    fsButtonElem.style.zIndex = 10000;
    fsButtonElem.isMoving = false;
    fsButtonElem.addEventListener("click", function() {
        if (!fsButtonElem.isMoving) {
            if (!document.fullscreenElement) {
                document.body.requestFullscreen();
            } else {
                document.exitFullscreen();
            }
        }
        fsButtonElem.isMoving = false;
    });
    document.body.appendChild(fsButtonElem);

    // Make the button draggable.
    // disabled: this is a bit quirky.
    /*
    fsButtonElem.addEventListener("mousedown", startDragButton);

    function startDragButton() {
        document.addEventListener("mouseup", finishDragButton);
        document.addEventListener("mousemove", moveButton);
    }

    function finishDragButton() {
        document.removeEventListener("mouseup", finishDragButton);
        document.removeEventListener("mousemove", moveButton);
    }

    function moveButton(event) {
        fsButtonElem.style.top = (fsButtonElem.offsetTop + event.movementY) + "px";
        fsButtonElem.style.left = (fsButtonElem.offsetLeft + event.movementX) + "px";
        fsButtonElem.isMoving = true;
    }
    */
    
    // Call keyboard lock when going full screen.
    document.addEventListener("fullscreenchange", event => {
        if (document.fullscreenElement) {
            if (navigator.keyboard) {
                console.log("Locking keyboard.");
                // NB: lock only work when in real full screen.
                // Using the chrome zoom menu doesn't really go full screen!
                navigator.keyboard.lock();
            } else {
                console.error("Locking keyboard is NOT supported.");
            }
        }
    });

})();