HTML5目前无正式VirtualKeyboard API，仅WICG提案且处于实验阶段；实际应通过监听resize事件、scrollIntoView、safe-area-inset-bottom及viewport优化等兼容方案解决键盘遮挡问题。
目前 HTML5 没有 VirtualKeyboard API，这是个常见误解。W3C 确实曾提案 VirtualKeyboard API（由 WICG 推进），但截至 2024 年底，它仍处于实验性阶段，未被任何主流浏览器正式支持（Chrome Canary 曾短暂启用过 flag，现已移除；Safari、Firefox 均无实现）。因此，无法通过标准 VirtualKeyboard API 来防止键盘遮挡输入框。
实际可用的替代方案
虽然 VirtualKeyboard API 不可用，但可通过以下成熟、跨平台兼容的方式有效缓解键盘遮挡问题：
- 监听 `resize` 事件 + 检测视口高度变化：移动端键盘弹出时，浏览器会缩放或压缩可视区域（`visualViewport` 或 `window.innerHeight` 明显变小）。可监听 `window.visualViewport?.onresize`（推荐）或 `window.onresize`，结合防抖判断键盘是否展开，并动态滚动/调整输入框位置。
- 使用 `scrollIntoView()` 主动聚焦后滚动：在 `` 的 `focus` 事件中调用 `element.scrollIntoView({ behavior: 'smooth', block: 'nearest' })`，确保输入框始终可见。注意避免重复触发（如已可见则跳过）。
- 为输入框外层添加 `padding-bottom` 或使用 `safe-area-inset-bottom`：在 `` 或输入区域容器上设置 `padding-bottom: env(safe-area-inset-bottom)`，适配 iPhone 底部安全区；配合 `viewport` meta 的 `height=device-height`（慎用）或 `interactive-widget: keyboard`（实验性，仅 Chrome 125+ 支持，非标准）可辅助布局。
- 禁用页面缩放 + 固定定位优化：在 `` 中移除 `user-scalable=yes`，添加 `width=device-width, initial-scale=1.0, maximum-scale=1.0`，减少键盘触发时的意外缩放；对底部输入框使用 `position: fixed; bottom: env(safe-area-inset-bottom)`，并用 JS 在键盘弹出时临时提升 `z-index` 和 `transform: translateY(0)` 强制重绘。
推荐最小可行代码示例
以下为兼容 iOS/Android 的轻量级处理（无需框架）：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<style>
.input-container {
position: fixed;
bottom: env(safe-area-inset-bottom, 0);
padding: 8px;
width: 100%;
}
input {
width: 100%;
padding: 12px;
}
</style>
<p><script>
let lastHeight = window.innerHeight;
const input = document.querySelector('input');</p><p>window.visualViewport?.addEventListener('resize', () => {
if (window.innerHeight < lastHeight - 150) {
// 键盘大概率已弹出
input.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
}
lastHeight = window.innerHeight;
});</p><p>input.addEventListener('focus', () => {
// 聚焦时再兜底一次
setTimeout(() => input.scrollIntoView({ block: 'nearest' }), 100);
});
</script></p>注意事项
不同系统行为差异较大：
- iOS Safari 键盘弹出会显著压缩 `innerHeight`，但不会触发 `visualViewport.resize`（需监听 `window.resize`）；部分版本还存在 `scrollIntoView` 失效问题，可改用 `element.getBoundingClientRect().bottom > window.innerHeight` 判断是否被遮挡后再手动 `window.scrollTo()`。
- Android Chrome 键盘弹出时 `visualViewport.height` 变化更可靠，优先使用 `visualViewport` 监听；但部分厂商定制浏览器可能不支持，需降级到 `window.resize`。
- 避免过度依赖 `focus`/`blur` 事件——软键盘切换输入框时可能不触发 `blur`，建议以视口尺寸变化为主，事件为辅。
