当前位置：首页 > article >正文

H5 ios软键盘弹起遮挡输入框

article 2024/12/23 7:21:37

在使用 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 = 0

const 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>