VirtualKeyboard：geometrychange 事件

实验性: 这是一项实验性技术
在将其用于生产之前，请仔细检查浏览器兼容性表格。

安全上下文: 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

VirtualKeyboard 接口的 geometrychange 事件会在屏幕虚拟键盘在显示和隐藏状态之间切换时触发。

geometrychange 事件对于检测虚拟键盘何时出现和消失（以便根据需要调整布局）非常有用。这在使用虚拟键盘 API 以禁用浏览器在虚拟键盘显示和隐藏时自动调整视口大小时尤为重要。

语法

在 addEventListener() 等方法中使用事件名称，或者设置事件处理器属性。

js
navigator.virtualKeyboard.addEventListener("geometrychange", (event) => {});

navigator.virtualKeyboard.ongeometrychange = (event) => {};

事件类型

通用 Event。

示例

以下代码片段使用 geometrychange 事件来检测虚拟键盘几何属性的变化，然后访问 boundingRect 属性来查询虚拟键盘的大小和位置：

js
if ("virtualKeyboard" in navigator) {
  navigator.virtualKeyboard.overlaysContent = true;

  navigator.virtualKeyboard.addEventListener("geometrychange", (event) => {
    const { x, y, width, height } = event.target.boundingRect;
  });
}

规范

Specification
VirtualKeyboard API
# dom-virtualkeyboard-ongeometrychange

浏览器兼容性

BCD tables only load in the browser

参见