无需登录 数据私有 本地保存

虚拟键盘API演示 - 控制键盘遮盖与布局

10
0
0
0

虚拟键盘 API 演示

Virtual Keyboard API — 控制键盘遮盖与布局行为

API 检测中...

下方模拟聊天界面，点击输入框触发键盘（移动端真实键盘 / 桌面端可开启模拟）

你好！这是一个虚拟键盘 API 演示 👋
试试点击底部的输入框，观察键盘行为
好的，让我试试！
切换顶部的 overlaysContent 开关可以看到不同效果
当 overlaysContent=true 时，键盘会覆盖在内容上方
明白了，我切换看看区别
键盘正在遮盖此区域 (overlaysContent=true)
QWERTYUIOP ASDFGHJKL⌫ ⇧ZXCVBNM⏎ 123空格.
键盘几何信息 (boundingRect)
x—
y—
width—
height—
top—
bottom—
键盘状态隐藏
visualViewport 数据
height—
width—
offsetTop—
pageTop—
scale—
事件日志
等待事件...

常见问题与知识点

Virtual Keyboard API 是一个现代浏览器API，允许开发者控制虚拟键盘（软键盘）在移动设备上的行为。通过 navigator.virtualKeyboard 访问，主要功能包括：切换键盘是否覆盖页面内容、获取键盘几何信息、监听键盘显示/隐藏事件。它在 Chrome 94+（Android）上可用。

当 overlaysContent = false（默认）时，浏览器会调整布局视口，将页面内容上推，使输入框始终可见。当 overlaysContent = true 时，键盘直接覆盖在页面内容上方，布局视口不变，适合需要精确控制布局的场景（如画布应用、游戏）。可通过本工具顶部开关实时切换体验。

使用 navigator.virtualKeyboard.addEventListener('geometrychange', callback) 事件。当键盘显示、隐藏或尺寸变化时触发。在回调中读取 navigator.virtualKeyboard.boundingRect，如果 height 为 0 表示键盘隐藏，否则表示键盘可见及其位置尺寸。

这是一组 CSS 环境变量，用于获取键盘的安全区域：keyboard-inset-height、keyboard-inset-width、keyboard-inset-top、keyboard-inset-bottom、keyboard-inset-left、keyboard-inset-right。当键盘可见时它们反映键盘尺寸，隐藏时为 0。需配合 viewport meta 中 interactive-widget=overlays-content 使用才能获得非零值。

visualViewport API 是更通用的视口监控方案，在更多浏览器中可用（包括 Safari iOS）。当键盘弹出时，visualViewport.height 会减小。Virtual Keyboard API 提供了更精确的键盘控制能力（如 overlaysContent），而 visualViewport 更侧重于只读监控。两者互补，建议结合使用以覆盖更多浏览器。

Virtual Keyboard API 目前主要在 Chrome 94+（Android） 上完全支持。桌面端浏览器通常不支持（因为没有软键盘）。Safari iOS 使用 visualViewport 方案。Firefox 移动端支持有限。在生产环境中应进行特性检测：if ('virtualKeyboard' in navigator) { ... }，并提供降级方案。

在 <meta name="viewport"> 中添加 interactive-widget 参数：
• interactive-widget=resizes-content（默认）：键盘调整布局视口
• interactive-widget=overlays-content：键盘覆盖内容，配合 CSS env() 变量使用
• interactive-widget=resizes-visual：调整视觉视口
这些设置可与 Virtual Keyboard API 配合使用，实现精细的键盘行为控制。
🔧 相关工具