Keyboard API - 提供了与连接到运行浏览器的设备上的物理键盘的工作方法

键盘 API 提供了使用连接到运行浏览器的设备的物理键盘的方法。

它提供了多种功能。键盘映射提供了一个接口,用于检索由键盘上的特定物理键生成的字符串,以便向用户正确识别该键。键盘锁定使网页能够捕获通常由用户代理或底层操作系统保留的按键。键盘 API 的预期用途是 Web 应用程序,例如提供全屏沉浸式体验的游戏或远程访问应用程序。

键盘 API 概念和用法

键盘映射

在物理键盘上,code 属性包含按下的键的物理位置,key 属性包含通过在键盘上的物理位置按下键生成的字符串。key 值考虑了键盘的区域设置(例如,“en-US”)、布局(例如,“QWERTY”)和修饰键状态(Shift、Control 等)。从历史上看,没有办法检索该信息。

键盘映射 API 通过 Keyboard 接口和 KeyboardLayoutMap 接口提供了一种检索特定按键生成的字符串的方法。Keyboard 接口通过 navigator.keyboard 访问。Keyboard 提供了 Keyboard.getLayoutMap 方法,该方法返回一个解析为 KeyboardLayoutMap 对象的承诺,该对象包含用于将代码转换为键的成员。在 UI 事件键盘事件代码值规范的写入系统键部分中可以找到有效代码值的列表。

以下实例演示如何获取与英语 QWERTY 键盘上标记为 W 相关的特定位置或特定布局的字符串。

if (navigator.keyboard) {
  var keyboard = navigator.keyboard;
  keyboard.getLayoutMap()
  .then(keyboardLayoutMap => {
    var upKey = keyboardLayoutMap.get('KeyW');
    window.alert('按 '+ upKey +' 向上移动。');
  });
} else {
  // 做其他的事
}

键盘锁定

交互式网页、游戏和远程流媒体体验通常需要在全屏模式下访问特殊键和键盘快捷键。此类键 / 键组合的实例包括 Escape、Alt+Tab 和 Ctrl+N。这些键和键组合通常由用户代理或底层操作系统捕获,如下例所示。

要捕获 “W”、“A”、“S” 和 “D” 键,请使用包含每个键的键代码属性值的列表调用 lock()

navigator.keyboard.lock(["KeyW", "KeyA", "KeyS", "KeyD"]);

无论按键使用哪种修饰符,这都会捕获这些键。假设标准的美国 QWERTY 布局,注册 KeyW 可确保将 “W”、Shift+“W”、Control+“W”、Control+Shift+“W” 以及所有其他带有 “W” 的键修饰符组合发送到应用程序. 这同样适用于 “KeyA”、“KeyS” 和 “KeyD”。

写入系统键

通过 Keyboard.lock 传递的代码和 KeyboardLayoutMap 接口的各种方法称为 “写入系统键”。

“写入系统键” 在 UI 事件键盘事件代码值规范的写入系统键部分定义为根据当前区域设置和键盘布局改变含义的物理键。这些键如下所示。所有标准键盘上都有蓝色键,而绿色键仅在某些键盘上可用。

编写由 UI 事件键盘事件代码值规范定义的系统键。Writing system keys as defined by the UI Events KeyboardEvent code Values spec.

接口

Keyboard

提供检索键盘布局映射和切换从物理键盘捕获按键的功能。

KeyboardLayoutMap

一个类似 map 的对象,具有检索与特定物理键相关的字符串的功能。

返回一个 Keyboard 对象,该对象提供了访问检索键盘布局映射和切换从物理键盘捕获按键的功能。

规范

规范 状态 备注
Keyboard Map 编者的草案 初始定义。
Keyboard Lock 编者的草案 初始定义。

浏览器兼容性

Keyboard API

桌面浏览器兼容性

特性ChromeEdgeFirefoxInternet ExplorerOperaSafari
基础支持6879 不支持 不支持55 不支持
getLayoutMap6979 不支持 不支持56 不支持
lock6879 不支持 不支持55 不支持
unlock6879 不支持 不支持55 不支持

移动浏览器兼容性

特性AndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
基础支持 不支持 不支持 未知 不支持 未知 不支持 不支持
getLayoutMap 不支持 不支持 未知 不支持 未知 不支持 不支持
lock 不支持 不支持 未知 不支持 未知 不支持 不支持
unlock 不支持 不支持 未知 不支持 未知 不支持 不支持

Keyboard lock API键盘锁 API

桌面浏览器兼容性

特性ChromeEdgeFirefoxInternet ExplorerOperaSafari
基础支持6979 不支持 不支持55 不支持
entries6979 不支持 不支持56 不支持
forEach6979 不支持 不支持56 不支持
get6979 不支持 不支持56 不支持
has6979 不支持 不支持56 不支持
keys6979 不支持 不支持56 不支持
size6979 不支持 不支持56 不支持
values6979 不支持 不支持56 不支持

移动浏览器兼容性

特性AndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
基础支持 不支持 不支持 未知 不支持 未知48 不支持
entries 不支持 不支持 未知 不支持 未知48 不支持
forEach 不支持 不支持 未知 不支持 未知48 不支持
get 不支持 不支持 未知 不支持 未知48 不支持
has 不支持 不支持 未知 不支持 未知48 不支持
keys 不支持 不支持 未知 不支持 未知48 不支持
size 不支持 不支持 未知 不支持 未知 不支持 不支持
values 不支持 不支持 未知 不支持 未知48 不支持