调研禁用快捷键这个问题的原因是工作中遇到一个需求，让用户可以在 web 端使用云 Photoshop。大家都知道 Photoshop 是有很多快捷键的，如何让用户在网页端使用 PhotoShop 的快捷指令并且不触发浏览器和系统本身的快捷指令就成了难题。

方案1： 在键盘事件中阻止按键

通过这种方式能够解决大部分问题，但还是存在一些比较严重的问题 ctrl + w/n/t 等浏览器内置的组合按键是无法禁止的，这样的话会引发很多不符合预期的操作，项目也无法落地。

实例代码：

document.onkeydown = (e) => {
    if (
        // 屏蔽F1-F12键、F1 - F12 => 112 - 123
        (e.keyCode >= 112 && e.keyCode <= 123) ||
        // 屏蔽TAB键
        e.keyCode === 9 ||
        // 禁止使用ALT、 CTRL、 SHIFT、command + 任意键!
        ((e.altKey || e.ctrlKey || e.shiftKey || e.metaKey) && e.keyCode < 10000)
    ) {
        window.event.returnValue = false;
    }
};

方案2：requestFullScreen 配合 navigator.keyboard.lock 方法锁定按键

1. 通过 requestFullScreen 把需要全屏的元素进行全屏
2. 然后调用 navigator.keyboard.lock 方法锁定键盘（实测这种情况下任何按键都会被拦截到）

注意：navigator.keyboard.lock 的兼容性很不好，在不兼容的情况下需要考虑降级操作。且 navigator.keyboard.lock 无法在 iframe 中使用，必须要 https 下才可用。且 requestFullScreen 和 navigator.keyboard.lock 方法都要在 "真实的用户操作" 下调用。

代码如下：

<div class="container">
  container
  <br />
  <button class="toogleButton">toogleButton</button>
</div>

const toogleButton = document.querySelector('.toogleButton');

const fullscreenchange = () => {
    // 监听到退出
    if (document.fullscreenElement === null) {
        console.log('navigator.keyboard.unlock()');
        navigator.keyboard.unlock();
        document.removeEventListener('fullscreenchange', fullscreenchange);
    }
};

toogleButton.addEventListener('click', () => {
    if (!document.fullscreenElement) {
        // 开启
        document.querySelector('body').requestFullscreen();
        console.log('navigator.keyboard.lock()');
        navigator.keyboard.lock();
        // 开启全屏后监听用户 esc 退出，退出后移除监听事件
        document.addEventListener('fullscreenchange', fullscreenchange);
    } else {
        // 关闭
        document.exitFullscreen();
        navigator.keyboard.unlock();
    }
});

* {
    padding: 0;
    margin: 0;
}

body,
html,
.container {
    width: 100%;
    height: 100%;
}

.container {
    background: #999;
    color: #fff;
    font-size: 40px;
    text-align: center;
}