在使用 Vue 3 和 TypeScript 开发 H5 页面时，输入框固定在底部，遇到 iOS 软键盘弹起遮挡输入框的问题。以下为几种解决方案：
1. 使用 viewport 元素调整页面视图
iOS 在弹出软键盘时，可能会导致页面内容被遮挡。通过调整 meta 标签中的 viewport 来确保页面可以适应不同的屏幕尺寸和键盘显示。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
- maximum-scale=1.0 可以防止页面缩放。
- user-scalable=no 禁用缩放功能。
- 结果：不管使，但要设置
2. 监听键盘事件
在 iOS 上，当软键盘弹起时，可以通过监听 focus 和 blur 事件来控制页面布局。通过监测键盘弹出时的事件，动态调整输入框的位置。
<template><div ref="inputElement" class="container"><input type="text" @focus="handleFocus" @blur="handleBlur" /></div>
</template><script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';const inputElement = ref<HTMLInputElement | null>(null);const handleFocus = () => {setTimeout(() => {// 使输入框滚动到视口可见区域if (inputElement.value) {inputElement.value.scrollIntoView({behavior: 'smooth',block: 'center',});}}, 300); // 延迟让键盘弹起后滚动
};const handleBlur = () => {// 软键盘收回时可以做额外处理setTimeout(() => {})
};onMounted(() => {
document.body.addEventListener('focusin', handleFocus)
document.body.addEventListener('blur', handleBlur);
});
</script><style lang="scss" scoped>
.container{position: fixed;bottom: 0;left: 0;width: 100%;
}
</style>
- scrollIntoView 方法可以将输入框滚动到视口的可视区域。
- 使用 setTimeout 延迟调用，确保软键盘弹起后再执行滚动。
- 注意该篇针对的是 container 的 position 为 fixed 的情况
- 结果：scrollIntoView 不生效，pass，思路可取，将 scrollIntoView 换成 scrollTo 即可生效
let scrollHeight = 0const handleFocus = () => {setTimeout(() => {// 使输入框滚动到视口可见区域scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0// window.innerHeight：当前窗口的高度（含有键盘高度）// window.visualViewport.height：可视区域的高度（不含有软键盘高度）// window.innerHeight - window.visualViewport.height 即为软键盘高度window.scrollTo({top: scrollHeight + window.innerHeight - window.visualViewport.height,behavior: 'smooth'})}, 300); // 延迟让键盘弹起后滚动
};const handleBlur = () => {// 软键盘收回时回归原位置setTimeout(() => {window.scrollTo({ top: scrollHeight, left: 0, behavior: 'smooth' })}, 300)
};
- visualViewport API 的兼容性：visualViewport API 在大多数现代浏览器中都支持，但需要确认你的目标浏览器支持这一特性，尤其是在一些较旧的版本或某些设备中。
3. 使用 keyboardAvoidingView (适用于 React Native)
虽然 keyboardAvoidingView 是 React Native 中的一个功能，但可以借鉴其思想，通过调整页面布局、使用 padding-bottom 或 margin-bottom 来适应软键盘的高度。
<template><div class="container"><input ref="inputElement" type="text" @focus="handleFocus" @blur="handleBlur" /></div>
</template><script setup lang="ts">
const inputElement = ref<HTMLInputElement | null>(null);const handleFocus = () => {document.body.style.paddingBottom = "200px"; // 适应软键盘的高度
};const handleBlur = () => {document.body.style.paddingBottom = "0"; // 收回软键盘时清除样式
};</script><style scoped>
.container {position: relative;/* 其他样式 */
}
</style>- 该方法没有实操过，理论上可行
