Keyboard API：快捷键锁定与输入治理

--- title: Keyboard API：快捷键锁定与输入治理 keywords: - navigator.keyboard.lock - 键盘锁定 - 快捷键治理 - 事件处理 - 焦点管理 description: 使用 Keyboard API 锁定系统快捷键并治理输入事件，结合焦点与可访问性策略，提升沉浸式应用体验与稳定性。 categories: - 文章资讯 - 技术教程 --- ## 概述 `navigator.keyboard.lock()` 允许在用户手势后请求锁定指定键（如 `Escape`/`F1` 等）的默认行为，适用于游戏与编辑器的沉浸式场景。 ## 用法/示例 ```js document.querySelector('#enter').addEventListener('click', async () => { try { await navigator.keyboard.lock(['Escape', 'F1']) } catch {} }) addEventListener('keydown', e => { if (e.key === 'Escape') {/* 自定义退出逻辑 */} }) ``` ## 工程建议 - 仅在明确的用户手势后锁定，提供退出与帮助入口。 - 与焦点与可访问性配合，避免破坏辅助技术与系统快捷键的可用性。 - 在不支持环境回退到常规事件处理与提示文案。 ## 参考与验证 - Chrome Docs：Keyboard Lock — https://developer.chrome.com/docs/web-platform/keyboard-lock - web.dev：Keyboard Lock — https://web.dev/articles/keyboard-lock