h5软键盘使页面宽高

### 解决 H5 页面因软键盘弹出引起页面宽高变动的方法 #### 一、检测软键盘的状态 由于 HTML5 缺乏直接监听软键盘事件的能力，需依赖于输入框获取/失去焦点以及视窗尺寸的变化来间接判断软键盘的行为。对于 iOS 设备而言，当软键盘显示时，虽然 WebView 的高度保持不变，但整个网页内容会上移，此时可通过监测 `window.innerHeight` 来感知这种变化[^1]。 ```javascript let initialHeight; function handleFocus() { initialHeight = window.innerHeight; // 记录初始窗口高度 } function handleBlur() { console.log('Soft keyboard closed'); } // 绑定到所有 input 和 textarea 元素上 document.querySelectorAll('input, textarea').forEach((el) => { el.addEventListener('focus', handleFocus); el.addEventListener('blur', handleBlur); }); ``` 而对于 Android 系统来说，WebView 高度确实会随着软键盘的出现而减少，因此可以直接利用这一特性来进行相应的调整。 #### 二、动态调整布局适应不同情况 针对 iOS 上固定定位元素随页面滚动而偏移的情况，可以通过 CSS 设置 `.fixed-element { position: fixed !important }` 来强制维持其位置不动；另外一种方法是在 JavaScript 中实时更新这些元素的位置，使其始终位于屏幕顶部或底部[^3]。 为了改善 Android 用户体验并防止页面突然跳动，建议采用 padding-bottom 方案，在输入框获得焦点时增加 body 下方填充量等于估计出来的虚拟键盘大小，从而预留足够的空间给表单控件展示而不至于被遮挡[^2]： ```css body.keyboard-opened { padding-bottom: 280px!important; /* 假设此处为平均值 */ } ``` 同时配合 JS 动态切换 class: ```javascript const inputs = document.querySelectorAll('input, textarea'); inputs.forEach(input => { input.addEventListener('focusin', () => { document.body.classList.add('keyboard-opened'); }); input.addEventListener('focusout', () => { setTimeout(() => { if (!document.activeElement || ['INPUT', 'TEXTAREA'].indexOf(document.activeElement.tagName) === -1) { document.body.classList.remove('keyboard-opened'); } }, 200); // 添加延迟确保动画平滑过渡 }); }); ``` 此外还可以考虑使用第三方库如 [KeyboardJS](https://github.com/dwachss/keyboardjs)，它提供了更简便的方式用于管理移动设备上的软件盘交互逻辑。 #### 三、Vue 特殊场景下的解决方案 在 Vue 应用程序中，如果遇到类似问题——即输入框处于页面底部且可能被打开后的软键盘覆盖，则可以尝试以下几种策略之一[^4]: - 使用 v-if 控制组件渲染时机，只有当用户真正需要编辑文本的时候才加载对应的 Input 组件； - 利用 ref 获取 DOM 节点后手动触发 focus 方法，并结合上述提到的技术手段优化视觉效果； - 对于 SPA (Single Page Application), 可能还需要额外关注路由变更期间可能出现的影响因素。