虚拟键盘: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;
  });
}

规范

规范
虚拟键盘 API
# dom-virtualkeyboard-ongeometrychange

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参见