虚拟键盘

实验性: 这是一个 实验性技术
在生产环境中使用此功能之前,请仔细查看 浏览器兼容性表

安全上下文: 此功能仅在 安全上下文(HTTPS)中可用,且仅在部分或全部 支持的浏览器 中可用。

VirtualKeyboard 接口是 虚拟键盘 API 的一部分,在具有屏幕虚拟键盘的设备(例如平板电脑、手机或其他可能没有硬件键盘的设备)上很有用。

VirtualKeyboard 接口使您可以选择退出浏览器自动处理屏幕虚拟键盘的方式,方法是减小视口高度以腾出空间放置虚拟键盘。您可以阻止浏览器更改视口大小,检测虚拟键盘的位置和大小(然后调整网页布局),并以编程方式显示或隐藏虚拟键盘。

您可以使用 navigator.virtualKeyboard 访问 VirtualKeyboard 接口。

EventTarget VirtualKeyboard

实例属性

VirtualKeyboard 接口继承其父级 EventTarget 的属性。

VirtualKeyboard.boundingRect 只读 实验性

一个 DOMRect,描述了虚拟键盘的几何形状。

VirtualKeyboard.overlaysContent 实验性

一个 Boolean,定义浏览器是否应停止处理屏幕虚拟键盘。

实例方法

VirtualKeyboard 接口继承其父级 EventTarget 的方法。

VirtualKeyboard.show() 实验性

显示虚拟键盘。

VirtualKeyboard.hide() 实验性

隐藏虚拟键盘。

事件

geometrychange 实验性

当屏幕虚拟键盘的几何形状发生变化时触发,这发生在虚拟键盘出现或消失时。

示例

以下示例演示了如何选择退出自动虚拟键盘行为,以及如何在网页中检测虚拟键盘的几何形状

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

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

规范

规范
虚拟键盘 API
# the-virtualkeyboard-interface

浏览器兼容性

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

另请参阅