html5 中无标准 virtualkeyboard api，其为 chromium 实验性私有接口，不被 safari/firefox 支持；浏览器禁止脚本主动弹出键盘，仅允许用户手势触发 focus()；可靠方式是结合 inputmode、enterkeyhint、autofocus 及 visualviewport 适配布局。
HTML5 中并没有名为 VirtualKeyboard 的标准 API 来直接控制虚拟键盘的弹出与布局。目前（截至 2024 年），VirtualKeyboard 是一个实验性、非标准、仅在部分 Chromium 内核浏览器（如 Chrome for Android）中通过 flag 启用的私有 API，且不被 Safari、Firefox 或大多数 WebView 支持，不能用于生产环境的可靠控制。
为什么不能用 VirtualKeyboard API 做“主动弹出”
出于安全与用户体验考虑，所有主流浏览器都禁止网页脚本主动触发虚拟键盘弹出。键盘是否弹出，完全由用户交互行为（如点击可编辑元素、调用 focus()）和系统策略决定。即使 Chrome 实验性支持 navigator.virtualKeyboard.show()，它也仅在满足严格条件时才生效（例如：元素已聚焦、页面处于前台、由用户手势触发），且多数情况下会被忽略。
实际可用的移动端键盘控制方式
虽然无法“强制弹出”，但可通过以下标准、兼容的方式影响键盘行为与布局：
-
正确设置
inputmode属性：提示系统应显示何种键盘类型（如inputmode="numeric"触发数字键盘，inputmode="search"触发带搜索按钮的键盘） -
使用语义化
type和enterkeyhint：例如<input type="search" enterkeyhint="search">可改变回车键文字，提升操作明确性 -
配合
autofocus与用户手势聚焦：在用户点击按钮后立即对 input 调用.focus()，这是最可靠触发键盘的方式（需确保该操作由用户手势发起） -
监听
keyboard相关事件（有限支持）：Chrome 支持virtualkeyboardheightchange（需启用 flag），但更通用的是监听resize或使用window.visualViewport检测视口高度变化，间接判断键盘是否展开
适配键盘展开后的布局问题
虚拟键盘展开会压缩可视区域，常导致输入框被遮挡。推荐做法：
- 为输入框添加
scrollIntoView({ behavior: 'smooth', block: 'nearest' })，在获得焦点后滚动至可视区域 - 监听
visualViewport的resize事件，动态调整定位（如将弹层锚定到输入框上方） - 避免绝对定位 + 固定 bottom 值；改用
position: fixed; bottom: env(keyboard-inset-bottom, 0)（iOS Safari 支持env(keyboard-inset-height)，Android Chrome 尚未支持该环境变量）
替代方案与建议
若需更高控制力（如聊天场景自动聚焦+滚动），应：
- 始终以用户点击/触摸为前提执行
input.focus() - 结合
setTimeout延迟scrollIntoView（等待键盘动画开始后再滚动） - 降级处理：对不支持
visualViewport的浏览器，用window.innerHeight对比历史值粗略判断键盘状态 - 放弃“控制键盘”，转而优化输入体验——清晰的视觉反馈、合理的表单顺序、减少输入项、提供快捷选择
不复杂但容易忽略：键盘行为本质是操作系统与浏览器协同管理的系统级交互，网页层只能“请求”与“响应”，不能“指挥”。遵循标准属性与事件，比追逐实验性 API 更稳定、更可持续。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
