为各种用例（包括互动式网站、游戏以及远程桌面或应用流式传输）提供沉浸式全屏体验。
随着越来越多的用户将大部分时间花在浏览器中，高度互动的网站、游戏、远程桌面串流和应用串流都力求提供沉浸式的全屏体验。为此，网站需要在全屏模式下访问特殊键和键盘快捷键，以便用于导航、菜单或游戏。可能需要使用的键包括 Esc、Alt + Tab、Cmd + ` 和 Ctrl + N 等。
默认情况下，这些键不适用于 Web 应用，因为它们会被浏览器或底层操作系统捕获。键盘锁定 API 使网站能够使用主机操作系统允许的所有可用键（请参阅浏览器兼容性）。
使用键盘锁定 API
Keyboard API 的 Keyboard 接口提供了一些函数，用于切换实体键盘的按键捕获功能，以及获取有关用户键盘布局的信息。
前提条件
在现代浏览器中，全屏模式有两种类型：通过 Fullscreen API 由 JavaScript 启动的全屏模式，以及通过键盘快捷键由用户启动的全屏模式。只有在 JavaScript 启动的全屏模式处于活动状态时，才能使用键盘锁定 API。 以下是 JavaScript 启动的全屏模式的示例：
await document.documentElement.requestFullscreen();
功能检测
您可以使用以下模式来检查是否支持键盘锁定 API：
if ('keyboard' in navigator && 'lock' in navigator.keyboard) {
// Supported!
}
锁定键盘
Keyboard 接口的 lock() 方法在启用对实体键盘上任何或所有按键的按键捕获后，会返回一个 promise。此方法只能捕获由底层操作系统授予访问权限的密钥。lock() 方法接受一个或多个要锁定的键代码的数组。如果未提供任何键代码，则所有键都将被锁定。如需查看有效的键码值列表，请参阅 UI Events KeyboardEvent code Values 规范。
捕获所有按键
以下示例会捕获所有按键操作。
navigator.keyboard.lock();
捕获特定按键
以下示例捕获了 W、A、S 和 D 键。无论按键时使用哪些修饰键，它都会捕获这些键。假设采用美国 QWERTY 布局，注册 "KeyW" 可确保将 W、Shift + W、Control + W、Control + Shift + W 以及所有其他包含 W 的按键修饰符组合发送到应用。"KeyA"、"KeyS" 和 "KeyD" 也是如此。
await navigator.keyboard.lock([
"KeyW",
"KeyA",
"KeyS",
"KeyD",
]);
您可以使用键盘事件来响应捕获的按键操作。例如，以下代码使用了 onkeydown 事件：
document.addEventListener('keydown', (event) => {
if ((event.code === 'KeyA') && !(event.ctrlKey || event.metaKey)) {
// Do something when the 'A' key was pressed, but only
// when not in combination with the command or control key.
}
});
解锁键盘
unlock() 方法会解锁 lock() 方法捕获的所有键，并以同步方式返回。
navigator.keyboard.unlock();
当文档关闭时，浏览器始终会隐式调用 unlock()。
演示
您可以运行此演示来测试 Keyboard Lock API。请务必查看源代码。点击下方的“进入全屏模式”按钮会在新窗口中启动演示，以便进入全屏模式。
安全注意事项
此 API 的一个问题是，它可用于获取所有密钥，并（与 Fullscreen API 和 PointerLock API 结合使用）阻止用户退出网页。为防止出现这种情况，规范要求浏览器提供一种供用户退出键盘锁的方式，即使 API 请求了所有按键也是如此。在 Chrome 中，此应急措施是长按（两秒）Esc 键，以触发退出键盘锁定模式。
实用链接
致谢
本文由 Joe Medley 和 Kayce Basques 审核。键盘锁定规范由 Gary Kacmarcik 和 Jamie Walch 撰写。主打图片由 Ken Suarez 在 Unsplash 上提供。