keyboard.lock使用

发表于 更新于 本文字数： 928 阅读时长 ≈ 2 分钟
本文是作者对keyboard.lock使用的介绍，包括keyboard.lock使用的优势、实现细节、相关资料等，这些步骤可以帮助作者提高keyboard.lock使用的效率。

最近在做WebShell自定义热键，遇到的问题是网页热键受限于浏览器和操作系统，有些热键无法捕获，比如command t。

经过调查发现navigator.keyboard.lock可以解决这个限制问题，这里记录下使用过程中的一些问题和心得

不可拦截热键

以Mac为例，实际测试比如以下几个热键不支持拦截。即JS层面我们无法捕获这类按键，也就阻止默认行为

1
2
3
4
5
⌘ N 创建新window
⌘ T 创建新Tab
⌘ W 关闭Tab
⌘ ⇧ [ 左Tab
⌘ ⇧ [ 右Tab

这个似乎无解，但有了lock api 这些就有可能解决了

lock api

  1. lock可以不传入参数即锁定所有按键
  2. lock可以传入参数即锁定指定按键，这里的按键并不支持锁定修饰键
1
navigator.keyboard.lock(["KeyW", "KeyA", "KeyS", "KeyD"]);
  1. 目前仅支持全屏模式，非全屏模式下lock并不会报错但也不work。
  • System keyboard lock is only available when the document is in fullscreen mode, and only from a secure origin.

​ 见 https://github.com/WICG/keyboard-lock/blob/gh-pages/explainer.md

  1. 兼容性上：Chrome/Edge/Opera支持，Firefox/Safari不支持

    见https://caniuse.com/mdn-api_keyboard_lock

例子

  1. https://keyboard-lock.glitch.me/
  2. https://github.com/alanhg/express-demo/blob/master/test/keyboard-lock/lock.html

PWA下

PWA下即使非全屏，navigator.keyboard.lock后也是可以正常捕获按键的。但不同OS下表现并不一致，因此即使PWA，也建议在全屏下使用热键，体验会是最好的。

写在最后

lock api解决了网页热键受限的痛点，但可惜的是几个主流浏览器还没完全支持，期待支持的一天吧。